Html 设置电子邮件和浏览器的 tr 和 td 宽度和高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18870705/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Setting tr and td width and height for email and browser
提问by Juicy
I am making HTML emails and I would like to preview them in my browser before sending them, so I would like them to look similar in the browser and in the email client. I've tried several ways to set the width and height of my rows and cells:
我正在制作 HTML 电子邮件，我想在发送之前在浏览器中预览它们，所以我希望它们在浏览器和电子邮件客户端中看起来相似。我尝试了几种方法来设置行和单元格的宽度和高度：
<table height="500" width="200">
<tr>
<td height="100">TEST</td>
</tr>
<tr>
<td style="height: 100px;">TEST</td>
</tr>
</table>
No success at setting the height either through the HTML properties or the style properties. The cell covers the whole height of the table.
通过 HTML 属性或样式属性设置高度都没有成功。单元格覆盖了表格的整个高度。
EDIT
编辑
Because it seems to be working on an blank HTML page I'm posting more of the code here. I'm actually using a Javascript on a PHP page to set the innerHTML property of a div. The full code of the function is:
因为它似乎在一个空白的 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;
}
The function is called and the innerHTML of the div changes fine. Everything is OK except the height of the cells is each 50%. They fill the whole table instead of taking 100px height each.
该函数被调用，div 的innerHTML 改变得很好。除了单元格的高度是每个 50% 之外，一切都很好。它们填满整个表格，而不是每个表格的高度为 100 像素。
Setting the height in the tr tag has the same effect, which is no effect.
在tr标签中设置高度也有同样的效果，没有效果。
MORE INFO
更多信息
This is the output on an empty HTML page. On my firefox browser the cells each take 50% of the height each. Covering the whole page instead of 100px
这是空 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>
I need to avoid using CSS for this, as I said it's HTML code generated for emails and email clients are not friendly to CSS.
我需要避免为此使用 CSS，因为我说过它是为电子邮件生成的 HTML 代码，电子邮件客户端对 CSS 不友好。
采纳答案by Love Trivedi
回答by SaturnsEye
Seems to be fine to me: http://jsfiddle.net/ZrKEV/1/
对我来说似乎很好：http: //jsfiddle.net/ZrKEV/1/
Only thing I can think of is that you missed out <table>...</table>
我唯一能想到的就是你错过了 <table>...</table>
回答by Suman
hi 2 things you have missed out.
嗨，你错过了两件事。
- You have to set style for every tr or td wherever u want to add inline css
- give values (height or width ) in px or % example 100px or 100%
- 您必须在要添加内联 css 的任何地方为每个 tr 或 td 设置样式
- 以 px 或 % 为单位给出值（高度或宽度），例如 100px 或 100%
Hope it will help you a bit
希望对你有所帮助
Thanks
谢谢
