我需要在电子邮件中创建一个表格，其中一些单元格有边框但下一行的单元格与上面一行的边框重叠。我可以使用：
创建它
<table style="width: 100%; background-color: #dcdcdc;" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td colspan="4" style="text-align: center; vertical-align: middle;">
<div style="height: 30px; display: flex; align-items: center; justify-content: center; box-shadow: 10px 10px red; background-color: yellow;">Primary Info</div>
</td>
<td style="width: 40px;"> </td>
<td style="width: 10px;"> </td>
</tr>
<tr>
<td style="width: 40px;"> </td>
<td colspan="4" style="text-align: center; vertical-align: middle;">
<div style="height: 30px; display: flex; align-items: center; justify-content: center; box-shadow: 10px 10px red; background-color: green;">Secondary Info</div>
</td>
<td style="width: 10px;"> </td>
</tr>
<tr>
<td colspan="6" style="line-height: 10px;"> </td>
</tr>
</tbody>
</table>
问题在于gmail和雅虎电子邮件的读者都没有尊重盒子阴影，因此人们在gmail / yahoo上看到的结果是没有边框的文字，文字被推到左上角而不是每个中心框。
我以为我可以在表格中指定单元格宽度来模仿盒子阴影外观，所以为此我写了这个：
<table style="width: 100%; background-color: #dcdcdc;" cellspacing="0" cellpadding="0">
<tbody>
<tr style="line-height: 10px;">
<td colspan="4" style="background-color: yellow;"> </td>
<td style="width: 10px;"> </td>
<td style="width: 10px;"> </td>
<td style="width: 10px;"> </td>
<td style="width: 10px;"> </td>
</tr>
<tr style="line-height: 10px;">
<td colspan="4" style="background-color: yellow;" align="center" valign="middle">Primary Info</td>
<td style="width: 10px; background-color: red;"> </td>
<td style="width: 10px;"> </td>
<td style="width: 10px;"> </td>
<td style="width: 10px;"> </td>
</tr>
<tr style="line-height: 10px;">
<td colspan="4" style="background-color: yellow;" align="center"> </td>
<td style="width: 10px; background-color: red;"> </td>
<td style="width: 10px;"> </td>
<td style="width: 10px;"> </td>
<td style="width: 10px;"> </td>
</tr>
<tr style="line-height: 10px;">
<td style="width: 10px;"> </td>
<td style="width: 10px; background-color: red;"> </td>
<td style="width: 10px; background-color: red;"> </td>
<td colspan="4" style="background-color: green;"> </td>
<td style="width: 10px;"> </td>
</tr>
<tr style="line-height: 10px;">
<td style="width: 10px;"> </td>
<td style="width: 10px;"> </td>
<td style="width: 10px;"> </td>
<td colspan="4" style="background-color: green;" align="center" valign="middle">Secondary Info</td>
<td style="width: 10px; background-color: red;"> </td>
</tr>
<tr style="line-height: 10px;">
<td style="width: 10px;"> </td>
<td style="width: 10px;"> </td>
<td style="width: 10px;"> </td>
<td colspan="4" style="background-color: green;"> </td>
<td style="width: 10px; background-color: red;"> </td>
</tr>
<tr style="line-height: 10px;">
<td style="width: 10px;"> </td>
<td style="width: 10px;"> </td>
<td style="width: 10px;"> </td>
<td style="width: 10px;"> </td>
<td colspan="4" style="background-color: red;"> </td>
</tr>
</tbody>
</table>
但是表格中指定的宽度并没有被显示该表格的浏览器所尊重。
我知道我可以使用上面的colspan和rowspan来使HTML更紧凑但是我试图尽可能简单地删除它并删除任何可能导致我问题的东西。
我认为，由于我在电子邮件中发送此信息，因此我无法在顶部编写CSS，因此我需要将所有命令指定为HTML，以便我能够做到这一点。做什么以及我正在寻求帮助来完成。
我已经在这方面工作了好几天并尝试了数百个选项，但是反复试验却一直产生错误！任何人都知道为什么我的宽度值被忽略，我需要做什么来获得我需要的表格布局而没有盒子阴影和CSS？
以下评论中的建议结果与= 20使用（我假设你的意思是宽度= 10）没有区别：
<table style="width: 100%; background-color: #dcdcdc;" cellspacing="0" cellpadding="0">
<tbody>
<tr style="line-height: 10px;">
<td colspan="4" style="background-color: yellow;"> </td>
<td width=10> </td>
<td width=10> </td>
<td width=10> </td>
<td width=10> </td>
</tr>
<tr style="line-height: 10px;">
<td colspan="4" style="background-color: yellow;" align="center" valign="middle">Primary Info</td>
<td width=10 style="background-color: red;"> </td>
<td width=10> </td>
<td width=10> </td>
<td width=10> </td>
</tr>
<tr style="line-height: 10px;">
<td colspan="4" style="background-color: yellow;" align="center"> </td>
<td width=10 style="background-color: red;"> </td>
<td width=10> </td>
<td width=10> </td>
<td width=10> </td>
</tr>
<tr style="line-height: 10px;">
<td width=10> </td>
<td width=10 style="background-color: red;"> </td>
<td width=10 style="background-color: red;"> </td>
<td colspan="4" style="background-color: green;"> </td>
<td width=10> </td>
</tr>
<tr style="line-height: 10px;">
<td width=10> </td>
<td width=10> </td>
<td width=10> </td>
<td colspan="4" style="background-color: green;" align="center" valign="middle">Secondary Info</td>
<td width=10 style="background-color: red;"> </td>
</tr>
<tr style="line-height: 10px;">
<td width=10> </td>
<td width=10> </td>
<td width=10> </td>
<td colspan="4" style="background-color: green;"> </td>
<td width=10 style="background-color: red;"> </td>
</tr>
<tr style="line-height: 10px;">
<td width=10> </td>
<td width=10> </td>
<td width=10> </td>
<td width=10> </td>
<td colspan="4" style="background-color: red;"> </td>
</tr>
</tbody>
</table>
答案 0 :(得分：0)
idk为什么问题中的HTML不能正常工作，但下面的工作正常，我通过在Word中绘制一个表格来保存，然后剥离不相关的部分并调整单元格尺寸：< / p>
<table style="width: 100%; background-color: #dcdcdc;" cellspacing="0" cellpadding="0">
<tr style="line-height: 10px;">
<td colspan=4 rowspan=3 style='text-align: center; vertical-align: middle; background:yellow;'>Primary Info</td>
<td style='width:10px;'> </td>
<td style='width:30px;'> </td>
<td style='width:10px;'> </td>
</tr>
<tr style="line-height: 10px;">
<td rowspan=2 style='width:10px; background:red;'> </td>
<td style='width:30px;'> </td>
<td style='width:10px;'> </td>
</tr>
<tr style="line-height: 10px;">
<td style='width:30px;'> </td>
<td style='width:10px;'> </td>
</tr>
<tr style="line-height: 10px;">
<td style='width:10px;'> </td>
<td style='width:40px; background:red;'> </td>
<td colspan=4 rowspan=3 style='text-align: center; vertical-align: middle; background:green;'>Secondary Info</td>
<td style='width:10px;'> </td>
</tr>
<tr style="line-height: 10px;">
<td style='width:10px;'> </td>
<td style='width:40px;'> </td>
<td rowspan=2 style='width:10px; background:red;'> </td>
</tr>
<tr style="line-height: 10px;">
<td style='width:10px;'> </td>
<td style='width:40px;'> </td>
</tr>
<tr style="line-height: 10px;">
<td style='width:10px;'> </td>
<td style='width:40px;'> </td>
<td style='width:10px;'> </td>
<td colspan=4 style='background:red;'> </td>
</tr>
</table>