设置电子邮件和浏览器的 tr 和 td 宽度和高度答案

【问题标题】：Setting tr and td width and height for email and browser设置电子邮件和浏览器的 tr 和 td 宽度和高度
【发布时间】：2017-01-02 01:28:17
【问题描述】：

我正在制作 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 页面上的输出。在我的 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 不友好。

【问题讨论】：

粘贴你完整的代码
尝试在<tr>中设置高度

标签： html css html-table

【解决方案1】：

试试这个Demo Here

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

【讨论】：

【解决方案2】：

对我来说似乎没问题：http://jsfiddle.net/ZrKEV/1/

我唯一能想到的就是你错过了<table>...</table>

【讨论】：

您好，感谢您试用。不过仍然有问题，我用更多信息更新了问题。
尝试将“px”添加到您的身高，而不仅仅是数字
您介意再看一下吗？我已经用空白 html 页面上的函数输出副本更新了问题，但它没有正确显示。

【解决方案3】：

嗨，你错过了两件事。

您必须为每个 tr 或 td 设置样式，无论您要添加内联 css 的位置
以 px 或 % 为单位给出值（高度或宽度），例如 100px 或 100%

希望对你有所帮助

谢谢

【讨论】：