设置电子邮件和浏览器的tr和td宽度和高度 [英] Setting tr and td width and height for email and browser
问题描述
我正在制作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 =595height =842align =leftbgcolor =＃FFFFFFborder =1cellpadding =0cellspacing =0style =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\>测试< / td>< / tr>;
end =< / table>;
parent.document.getElementById（'divToChange'）。innerHTML = begin + test + testTwo + end;
}
函数被调用，div的innerHTML变得很好。一切正常，除了单元格的高度各为50％。
在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 =leftbgcolor =＃FFFFFFborder =1cellpadding =0cellspacing =0height =842width =595>
< tbody>
< tr height =100>< td height =100>测试< / td>< / tr>
< tr height =100>< td height =100>测试< / td>< / tr>
< / tbody>
< / table>
< / body>
< / html>
我需要避免使用CSS，因为我说它是为电子邮件和电子邮件客户端生成的HTML代码
尝试使用 演示
=500width =200>
< tr>< td height =100> TEST< / td>< / tr>
< tr>< td style =height：100px; display：block> TEST< / td>< / tr>
< / table>
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:
<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.
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:
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.
Setting the height in the tr tag has the same effect, which is no effect.
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>
<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.
Try This 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>
这篇关于设置电子邮件和浏览器的tr和td宽度和高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
