TD 继承 TABLE 宽度

Question

我面临的问题是，尽管明确设置了自己的宽度，但我的表中的 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>

这是继承的表格宽度640像素，而不是30像素也是应该的。

似乎无论我更改了什么，问题仍然存在.. 我已经在本地和 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>

我现在在中间行的上方和下方有一个我无法摆脱的间隙。

Answer 1

表格中的每一行都必须具有相同数量的单元格。如果要在一行中使用较少的单元格，则必须显式设置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>

但总数必须始终与表格中使用的最大单元格数相匹配。

必须对表中的每一行重复此过程。