logo标签列表

为电子邮件和浏览器设置tr和td宽度和高度

htmlcsshtml-table
5

我正在制作HTML邮件，希望在发送之前可以在浏览器中预览它们，因此希望在浏览器和电子邮件客户端中看起来类似。我尝试了几种方法来设置行和单元格的宽度和高度：

<table height="500" width="200">
    <tr>
        <td height="100">TEST</td>
    </tr>
    <tr>
        <td style="height: 100px;">TEST</td>
    </tr>
</table>

没有通过HTML属性或样式属性成功设置高度。单元格覆盖整个表格的高度。
编辑：
因为它似乎在空白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页面上的输出。在我的火狐浏览器中，每个单元格占据高度的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 不友好。

请粘贴完整的代码。 - Raab
尝试在您的<tr>中设置高度。 - Albzi
3个回答
4
尝试这个 演示在这里。
<table height="500" width="200">
<tr><td height="100">TEST</td></tr>
<tr><td style="height: 100px;display:block">TEST</td></tr>
</table>
1
嘿，感谢您的尝试。不过我仍然遇到问题，我已经更新了问题并提供了更多信息。 - Juicy
尝试在高度值后面添加“px”，而不仅仅是数字。 - SaturnsEye
您介意再看一下吗？我已经更新了问题，并在空白的HTML页面上附上了函数输出的副本，但它显示不正确。 - Juicy
0

你有两个遗漏的地方。

  1. 在想要添加内联 CSS 的每个 tr 或 td 中都必须设置样式。
  2. 以 px 或 % 为单位给出值（高度或宽度），例如 100px 或 100%。

希望这能对你有所帮助。

谢谢。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接