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>

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

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列开始或......

Answer 2

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

为什么colspan没有按预期应用

2 个答案: