我正在制作 HTML 电子邮件,我想在发送之前在浏览器中预览它们,因此我希望它们在浏览器和电子邮件客户端中看起来相似。我尝试了多种方法来设置行和单元格的宽度和高度:
<table height="500" width="200">
<tr>
<td height="100">TEST</td>
</tr>
<tr>
<td style="height: 100px;">TEST</td>
</tr>
</table>
通过 HTML 属性或样式属性设置高度均未成功。该单元格覆盖了桌子的整个高度。
EDIT
因为它似乎在空白 HTML 页面上运行,所以我在这里发布了更多代码。
我实际上在 PHP 页面上使用 Javascript 来设置 div 的innerHTML 属性。该函数的完整代码为:
function changeDivHTML()
{
begin = '<table width="595" height="842" align="left" bgcolor="#FFFFFF" border="1" cellpadding="0" cellspacing="0" style="border: 1px solid black; border-radius: 10px; padding: 0px;padding-top: 6px; margin: 0px;">';
test = "<tr><td height=\"100\">Test</td></tr>";
testTwo = "<tr><td height=\"100\">Test</td></tr>";
end = "</table>";
parent.document.getElementById('divToChange').innerHTML = begin + test + testTwo + end;
}
该函数被调用并且 div 的innerHTML 发生了很好的变化。除了单元格的高度各为 50% 之外,一切都正常。它们填满整个表格,而不是每个高度 100 像素。
在tr标签中设置高度也有同样的效果,就是没有效果。
更多信息
这是空 HTML 页面上的输出。在我的 Firefox 浏览器上,每个单元格占据高度的 50%。覆盖整个页面而不是 100px
<html>
<head>
</head>
<body onload="window.print()">
<table style="border: 1px solid black; border-radius: 10px; padding: 0px;padding-top: 6px; margin: 0px;" align="left" bgcolor="#FFFFFF" border="1" cellpadding="0" cellspacing="0" height="842" width="595">
<tbody>
<tr height="100"><td height="100">Test</td></tr>
<tr height="100"><td height="100">Test</td></tr>
</tbody>
</table>
</body>
</html>
我需要避免为此使用 CSS,正如我所说,它是为电子邮件生成的 HTML 代码,而电子邮件客户端对 CSS 不友好。