为什么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>

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

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确定单元格重叠的列数，而不是这些列的大小。使用 CSSwidth属性来指定事物的宽度。