为什么 colspan 没有按预期应用

Question

我有一张表格如下。第二行定义了三列，一列是 colspan=8 ，其他列是 colspan=1 。尽管如此，单元格并未根据 colspan 进行拉伸，第二个单元格的“宽度”稍大，第三个单元格的“宽度”最大。

 <table class="floating simpletable">
    <tbody>
        <tr><td colspan="10">1st row</td></tr>
        <tr><td colspan="8">Column 1 -&gt; Least wide</td><td colspan="1">2nd</td><td colspan="1">3rd</td></tr>
        <tr><td colspan="10">3rd row</td></tr>
        <tr><td colspan="1">1st cell</td><td colspan="9">4th row</td></tr>
    </tbody>
</table>

问题是什么以及如何解决？

原文由 Nicsoft 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

单元格的宽度取决于单元格内容、宽度的 HTML 和 CSS 设置、浏览器以及可能的月相。 colspan 属性仅指定一个单元格占用多少列（因此，表格的网格中有多少个槽）。

如果您看到第 2 行的最后一个单元格最宽，则原因可能是它包含最多的内容（或者它有宽度设置）。您的演示代码未演示此类行为。

如果您不希望列宽根据单元格的大小要求进行调整，请在 CSS（或 HTML）中明确设置宽度。在此之前，最好从表结构中去除所有不必要的复杂性。如果您的演示代码反映了整个结构，那么第 2 列到第 8 列是不必要的划分，即它们可以变成一个单独的列。演示（为了明确起见，像素宽度很差）：

 <table class="floating simpletable" border>
    <col width=100><col width=100><col width=100>
    <tbody>
        <tr><td colspan="4">1st row</td></tr>
        <tr><td colspan="2">span 1</td><td>span 2</td><td>span 3 </td></tr>
        <tr><td colspan="4">3rd row</td></tr>
        <tr><td>span</td><td colspan="3">other span</td></tr>
    </tbody>
</table>

如果不进行这样的重写，恐怕您的表格会违反 HTML 的表格模型，因为目前没有从第 3 列或第 4 列开始的单元格或…

原文由 Jukka K. Korpela 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

colspan 确定单元格重叠的列数，而不是这些列的大小。使用 CSS width 属性来指定事物的宽度。

原文由 Quentin 发布，翻译遵循 CC BY-SA 3.0 许可协议