为什么将图像添加到表格单元格会导致它在其周围添加填充

Question

为什么将图像添加到表格单元格会导致它在其周围添加填充

我有以下正确显示的HTML代码：

<tr style="background: #FFFFFF">
    <td style="width: 300px; background: #FF0000; padding: 0; margin: 0;">
        <!--<img border="0" name="Cont_206" src="uly/travelmed.jpg" alt="" />-->
    </td>
    <td style="width: 277px;">
        <p style="text-align: left;"><span style="font-size: 14px;"><span style="font-family: Arial;">If you are planning to visit less developed nations or regions, Travel Medicine and Infectious Disease specialists <strong><a name="Forni_1" xt="SPCLICKSTREAM" href="http://aspx?id=367" target="_blank">Dr. Art</a></strong> and <strong><a name="Kesh_1" xt="SPCLICKSTREAM" href="http://provider.aspx?id=368" target="_blank">Dr. Sa</a></strong> provide an essential medical service to protect your health.</span></span></p>
        <p style="text-align: left;"><span style="color: rgb(99, 187, 77);"><span style="font-size: 14px;"><span style="font-family: Arial;"><strong>Why Their Service is Unique<br />
        </strong><span style="color: rgb(51, 51, 51);">Our travel medicine services are like an insurance policy,&rdquo; says Dr. Kesh.</span></span></span></span></p>
    </td>
</tr>

显示器：

当我取消注释宽度为290像素的图像时，它会占用比正常更多的空间并挤压它旁边的单元格：

如何修复它，以便图像周围没有多余空格？

Answer 1

如果希望修改表的宽度而不是为内容添加内容，则必须将此行为设置为table元素。在CSS中，您可以使用table-layou并修复值。 你的代码变得基本：

<table style="table-layout:fixed">
<tr style="background: #FFFFFF">
    <td style="width: 300px; background: #FF0000; padding: 0; margin: 0;">
        <!--<img border="0" name="Cont_206" src="uly/travelmed.jpg" alt="" />-->
    </td>
    <td style="width: 277px;">
        <p style="text-align: left;"><span style="font-size: 14px;"><span style="font-family: Arial;">If you are planning to visit less developed nations or regions, Travel Medicine and Infectious Disease specialists <strong><a name="Forni_1" xt="SPCLICKSTREAM" href="http://aspx?id=367" target="_blank">Dr. Art</a></strong> and <strong><a name="Kesh_1" xt="SPCLICKSTREAM" href="http://provider.aspx?id=368" target="_blank">Dr. Sa</a></strong> provide an essential medical service to protect your health.</span></span></p>
        <p style="text-align: left;"><span style="color: rgb(99, 187, 77);"><span style="font-size: 14px;"><span style="font-family: Arial;"><strong>Why Their Service is Unique<br />
        </strong><span style="color: rgb(51, 51, 51);">Our travel medicine services are like an insurance policy,&rdquo; says Dr. Kesh.</span></span></span></span></p>
    </td>
</tr>
</table>

最好将样式放在css文件中并避免使用样式属性。风格将是相同的。

DEMO http://codepen.io/anon/pen/gJabz