我面临的问题是我的表中的TD继承了表的宽度，尽管明确设置了自己的宽度。
代码如下：
<div class="widget widget-new-products">
<div class="widget-products">
<table cellspacing="0" width="640px" cellpadding="0" border="0" align="center">
<tr>
<td>
<img src="header.gif" alt="New Releases">
</td>
</tr>
<tr style="font-size: 0;">
<td width="30px"><img width="30px" height="95px" src="leftsep.gif" alt="" ></td>
<td width="85px">
<a href="" title="" class="product-image"><img src="product1.jpg" width="85" height="85" alt="image" ></a>
</td>
<td width="100px">
<a style="font-family:sans-serif; font-size:13px; line-height:14px; color:#444; font-weight:bold;" title="" href="">item 1</a>
</td>
<td width="100px" align="right">
<p style="font-family:sans-serif; font-size:22px; line-height:24px; font-weight:bold; color:#e05371; margin:0 0 5px 0;">£30.00</p>
<a href=""><img src="view-product.jpg" height="30px" width="111px" alt="View Product"></a>
</td>
<td width="10px">
</td>
<td width="85px">
<a href="" title="" class="product-image"><img src="product2.jpg" width="85" height="85" alt="" ></a>
</td>
<td width="100px">
<a style="font-family:sans-serif; font-size:13px; line-height:14px; color:#444; font-weight:bold;" title="" href="">item 2</a>
</td>
<td width="100px" align="right">
<p style="font-family:sans-serif; font-size:22px; line-height:24px; font-weight:bold; color:#e05371; margin:0 0 5px 0;">£10.00</p>
<a href=""><img src="view-product.jpg" height="30px" width="111px" alt="View Product"></a>
</td>
<td width="30px"><img width="30px" height="95px" src="rightsep.gif" alt=""></td>
</tr>
<tr>
<td>
<img src="footer.gif" alt="">
</td>
</tr>
</table>
</div>
</div>
具体而言，受影响的TD是表中的第一个：
<td width="30px"><img width="30px" height="95px" src="leftsep.gif" alt="" ></td>
继承 640px 的表格宽度，而不是 30px 。
似乎无论我改变什么，问题仍然存在。我已经在本地和JSFiddle中进行了测试。
我对HTML没有经验，所以我不确定问题是什么。
更新代码
<div class="widget widget-new-products">
<div class="widget-products">
<table cellspacing="0" width="640px" cellpadding="0" border="0" align="center" style="border-spacing: 0;">
<tr>
<td colspan="8">
<img src="http://crazybeatweb1.cms.iwebcloud.co.uk/media/newsletter/new-releases.gif" alt="New Releases">
</td>
</tr>
<tr>
<td width="30"><img width="30px" height="95px" src="http://crazybeatweb1.cms.iwebcloud.co.uk/media/newsletter/new-releases-left.gif" alt="" ></td>
<td width="85">
<a href="" title="" class="product-image"><img src="http://crazybeatweb1.cms.iwebcloud.co.uk/media/catalog/product/cache/1/small_image/85x/9df78eab33525d08d6e5fb8d27136e95/1/_/1.jpg_14603.jpg" width="85" height="85" alt="image" ></a>
</td>
<td width="100">
<a style="font-family:sans-serif; font-size:13px; line-height:14px; color:#444; font-weight:bold;" title="" href="">Clydie King - Direct Me - Inc Never Like This Before</a>
</td>
<td width="111" align="right">
<p style="font-family:sans-serif; font-size:22px; line-height:24px; font-weight:bold; color:#e05371; margin:0 0 5px 0;">£30.00</p>
<a href=""><img src="http://crazybeatweb1.cms.iwebcloud.co.uk/media/newsletter/view-product.jpg" height="30px" width="111px" alt="View Product"></a>
</td>
<td width="85">
<a href="" title="" class="product-image"><img src="http://crazybeatweb1.cms.iwebcloud.co.uk/media/catalog/product/cache/1/small_image/85x/9df78eab33525d08d6e5fb8d27136e95/4/_/4.jpg_14418.jpg" width="85" height="85" alt="" ></a>
</td>
<td width="100">
<a style="font-family:sans-serif; font-size:13px; line-height:14px; color:#444; font-weight:bold;" title="" href="">T.M.V.S. - Don't Be Shy</a>
</td>
<td width="111" align="right">
<p style="font-family:sans-serif; font-size:22px; line-height:24px; font-weight:bold; color:#e05371; margin:0 0 5px 0;">£10.00</p>
<a href=""><img src="http://crazybeatweb1.cms.iwebcloud.co.uk/media/newsletter/view-product.jpg" height="30px" width="111px" alt="View Product"></a>
</td>
<td width="30">
<img width="30px" height="95px" src="http://crazybeatweb1.cms.iwebcloud.co.uk/media/newsletter/new-releases-right.gif" alt="">
</td>
</tr>
<tr>
<td colspan="8">
<img src="http://crazybeatweb1.cms.iwebcloud.co.uk/media/newsletter/new-releases-bottom.gif" alt="">
</td>
</tr>
</table>
</div>
</div>
我现在在中间行的上方和下方有一个间隙，我无法摆脱它。
答案 0 :(得分：4)
表中的每一行必须具有相同数量的单元格。如果要在一行中使用较少的单元格，则必须明确设置colspan属性以匹配：
<tr>
<td colspan="9"> <!-- set this to the maximum number of cells there will be in a row -->
<img src="header.gif" alt="New Releases">
</td>
</tr>
您可以混合搭配colspan：
<tr>
<td colspan="5">
<img src="header.gif" alt="New Releases">
</td>
<td colspan="4">
<img src="header.gif" alt="New Releases">
</td>
</tr>
但总数必须始终与表格中使用的最大单元格数相匹配。
必须对表格中的每一行重复此过程。
答案 1 :(得分：0)
我认为应该是：
<td width="200">
或
<td style="width: 200px">
答案 2 :(得分：0)
您有一个包含3行但不同数量的单元格的表。 如果你想要一个单元格跨越整个表格，就像页眉和页脚一样，你需要在它们上指定一个行数，如下所示：
<tr>
<td rowspan="9"><img src="header.gif" alt="New Releases"></td>
</tr>
在这种情况下为9，因为你的中间行有9个单元格。 否则浏览器会将表格渲染错误。