Question

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

似乎我不能让我的桌子尊重宽度。到目前为止，这是我的代码：

<!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-layout:fixed和auto，但无效。

另外，我知道HTML元素标签中的内联样式是不受欢迎的，但出于某些原因需要这段代码。我很抱歉给您带来不便。

Answer 1

这是因为你的第一行只有1个表格单元格，第二行只有3个表格单元格。顶行扩展以容纳这3个单元格。将colspan="3"添加到第一行的第一个表格单元格中以修复宽度问题。

<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样式和表格进行布局通常是一个坏主意，这可能是导致此问题的原因之一。

使用HTML 1.0过渡时未考虑表宽度

1 个答案: