Question

我正在尝试在表中合并两列的非常简单的操作。使用colspan这似乎很容易，但如果我合并不同的列而不留下至少一行而没有任何合并列，则大小调整完全混乱。请在http://www.allthingsdope.com/table.html查看以下示例，或者查看并尝试以下代码：

好：

<table width="700px">
<tr>
    <th width="100px">1: 100px</th>
    <td width="300px">2: 300px</td>
    <td width="200px">3: 200px</td>
    <td width="100px">4: 100px</td>
</tr>
<tr>
    <th width="100px">1: 100px</th>
    <td colspan=2 width="500px" >2 & 3: 500px</td>
    <td width="100px">4: 100px</td>
</tr>

<tr>
    <th width="100px">1: 100px</th>
    <td width="300px">2: 300px</td>
    <td colspan=2 width="300px">3 & 4: 300px</td>
</tr>
</table>

为：

<table width="700px">
<tr>
    <th width="100px">1: 100px</th>
    <td colspan=2 width="500px" >2 & 3: 500px</td>
    <td width="100px">4: 100px</td>
</tr>
<tr>
    <th width="100px">1: 100px</th>
    <td width="300px">2: 300px</td>
    <td colspan=2 width="300px">3 & 4: 300px</td>
</tr>
</table>

这看起来很简单，但我无法理解！

Answer 1

不要将width属性放在单个单元格上。这已被弃用至少html 4.01（http://www.w3.org/TR/html401/struct/tables.html#h-11.2.6，如果您关心w3c不赞同您的编码）。在任何情况下，如果你试图将它与colspans混合，你会遇到各种各样的麻烦。

相反，将<col>元素添加到表中，如下所示：

    <table width="700px">
        <col width="100px"/>
        <col width="300px"/>
        <col width="200px"/>
        <col width="100px"/>
        <tr>
            <th>1: 100px</th>
            <td colspan="2">2 &amp; 3: 500px</td>
            <td>4: 100px</td>
        </tr>
        <tr>
            <th>1: 100px</th>
            <td>2: 300px</td>
            <td colspan="2">3 &amp; 4: 300px</td>
        </tr>
    </table>

＆lt; col＆gt; element元素恰好用作占位符，用于挂起适用于整个列的属性。

Answer 2

只需将合并列中的width参数替换为“auto” - 它将获得“剩下的任何东西”，它完美地运行。所以：

<table width="700px" border="1px">
<tr>
    <th width="100px">1: 100px</th>
    <td colspan=2 width="auto"  >2 & 3: 500px</td>
    <td width="100px">4: 100px</td>
</tr>
<tr>
    <th width="100px">1: 100px</th>
    <td width="300px">2: 300px</td>
    <td colspan=2 width="auto">3 & 4: 300px</td>
</tr>
</table>

跨越HTML表格中的列

2 个答案: