Table 使用 HTML 1.0 过渡时不考虑宽度

Question

编辑：记住你的 COLSPANS。谢谢 Lynel Hudson。

我的 table 似乎无法遵守宽度。到目前为止，这是我的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

<body>

    <table width="480px" cellpadding="0" cellspacing="0" border="0" bgcolor="#EFA8D6" align="center">
        <tr width="480px" height="200px" cellpadding="0" cellspacing="0" border="0" bgcolor="#EFA8D6" align="left" valign="middle">
            <td width="480px" height="200px" cellpadding="0" cellspacing="0" border="0" bgcolor="#EFA8D6" align="left" valign="middle" *EDIT: colspan="3" /EDIT*>
                <img src="http://vixi.com/sites/default/files/imagecache/Frontpage/RawFood.jpg" style="display:block;" border="0" width="480px" height="200px"/>
            </td>
        </tr>
        <tr width="480px" cellpadding="0" cellspacing="0" border="0" bgcolor="#EFA8D6" align="left" valign="middle">
            <td width="20px" cellpadding="0" cellspacing="0" border="0" bgcolor="red" align="left" valign="middle" style="font-size:10px;">
                &nbsp;
            </td>

            <td width="440px" cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff" align="left" valign="middle" style="font-size:20px;">
                Stuff
            </td>

            <td width="20px" cellpadding="0" cellspacing="0" border="0" bgcolor="#000000" align="left" valign="middle" style="font-size:10px;">
                &nbsp;
            </td>
        </tr>
    </table>

</body>

现在，当您从代码中取出第二行时，table 的整体宽度得到了尊重。但是，添加第二行和它的三个数据单元格在一定程度上打破了宽度。

在第二行，我的两个带有空白文本的侧单元格 ( ) 的宽度似乎没有得到尊重。

我试过table-layout:fixed和auto，都不行。

此外，我知道 HTML 元素标记中的内联样式令人不悦，但由于某些原因，这段特定的代码是必需的。对于给您带来的不便，我深表歉意。

Answer 1

这是因为您的第一行只有 1 个 table 单元格，第二行有 3 个。顶行展开以容纳这 3 个单元格。将 colspan="3" 添加到第一行的第一个 table 单元格以解决宽度问题。

<head>

</head>

<body>

    <table width="480px" cellpadding="0" cellspacing="0" border="0" bgcolor="#EFA8D6" align="center">
        <tr width="480px" height="200px" cellpadding="0" cellspacing="0" border="0" bgcolor="#EFA8D6" align="left" valign="middle">
            <td width="480px" height="200px" cellpadding="0" cellspacing="0" border="0" bgcolor="#EFA8D6" align="left" valign="middle" colspan="3">
                <img src="http://vixi.com/sites/default/files/imagecache/Frontpage/RawFood.jpg" style="display:block;" border="0" width="480px" height="200px"/>
            </td>
        </tr>
        <tr width="480px" cellpadding="0" cellspacing="0" border="0" bgcolor="#EFA8D6" align="left" valign="middle">
            <td width="20px" cellpadding="0" cellspacing="0" border="0" bgcolor="red" align="left" valign="middle" style="font-size:10px;">
                &nbsp;
            </td>

            <td width="440px" cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff" align="left" valign="middle" style="font-size:20px;">
                Stuff
            </td>

            <td width="20px" cellpadding="0" cellspacing="0" border="0" bgcolor="#000000" align="left" valign="middle" style="font-size:10px;">
                &nbsp;
            </td>
        </tr>
    </table>

</body>

使用内联 CSS 样式和 table 布局通常不是一个好主意，这可能是导致您遇到此问题的一个因素。

Table 使用 HTML 1.0 过渡时不考虑宽度

Table width not respected using HTML 1.0 transitional

html

html-table

width

cells