TD 继承 TABLE 宽度答案

【问题标题】：TD Inheriting TABLE widthTD 继承 TABLE 宽度
【发布时间】：2014-02-13 23:50:07
【问题描述】：

我面临的问题是我的表格中的 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>

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

【问题讨论】：

您应该使用 CSS 来设置表格样式。
我建议改用 css 文件。如果你还想用 on table 标签定义，不要使用 px，比如，或者内联样式 (with px): style="width:100px" ...

标签： html css html-table width

【解决方案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>

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

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

【讨论】：

这行得通，谢谢。但是我现在在中间行的上方和下方有一个间隙（我已经用新代码更新了）
中间行有多少个单元格？第一个代码块中有 9 个，但第二个代码块只有 8 个，这使得 colspan="9" 错误
对不起，我进行了编辑并忘记更改它，它确实是 8 但随着 colspan 更改，错误仍然存在。在这里看到：jsfiddle.net/wY4VH
我没有看到间隙jsfiddle.net/wY4VH/1 你确定它不是图像的一部分吗？我不知道，因为您的服务器受密码保护
对不起！我忘了我把它设置为受保护，将图像设置为display:block 解决了问题，谢谢！

【解决方案2】：

我认为应该是：

<td width="200">

或

<td style="width: 200px">

【讨论】：

【解决方案3】：

您有一个包含 3 行但单元格数量不同的表格。如果你想让一个单元格跨越整个表格，就像页眉和页脚一样，你需要像这样在它们上指定一个行跨度：

<tr>
    <td rowspan="9"><img src="header.gif" alt="New Releases"></td>
</tr>

在本例中为 9，因为您的中间行有 9 个单元格。否则浏览器会错误的渲染表格。

【讨论】：