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

时间:2013-09-18 11:12:32

标签: html css html-table

我正在制作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%外,一切都还可以。它们填满了整个桌子而不是每个高度为100px。

在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不友好。

3 个答案:

答案 0 :(得分:4)

试试这 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>

答案 1 :(得分:0)

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

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

答案 2 :(得分:0)

你错过了2件事。

  1. 您必须为每个tr或td设置样式,无论您想要添加内联css
  2. 以px或%示例100px或100%
  3. 给出值(高度或宽度)

    希望它会对你有所帮助

    由于