html - 为什么colspan没有按预期应用

我有一张下面的桌子。第二行定义了三个列，一个列的值为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>

问题是什么？如何解决？

最佳答案

单元格的宽度取决于单元格内容、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列或…

关于html - 为什么colspan没有按预期应用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/9257308/