我有一个表根据下面。第二行定义了三列,一个与colspan=8
和其他与colspan=1
。仍然,单元格没有根据列跨度拉伸,“宽度”是多一点的第二个单元格和最宽的第三个。
<table class="floating simpletable">
<tbody>
<tr><td colspan="10">1st row</td></tr>
<tr><td colspan="8">Column 1 -> 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>
问题是什么以及如何解决?
3条答案
按热度按时间piv4azn71#
单元格的宽度取决于单元格内容、HTML和CSS的宽度设置、浏览器,可能还取决于月相,
colspan
属性只指定一个单元格占用多少列(因此,表格网格中有多少个位置)。如果您看到第2行的最后一个单元格最宽,那么原因可能是它的内容最多(或者它有一个宽度设置),您的演示代码没有演示这种行为。
如果不希望列宽调整为单元格的大小要求,请在CSS中显式设置列宽(或在HTML中)。在此之前,最好从表结构中删除所有不必要的复杂性。如果您的演示代码反映了整个结构,那么列2到8是一个不必要的划分,例如,它们可以被转换为一个单独的列。演示(使用拙劣的像素宽度只是为了明确):
如果没有这样的重写,恐怕您的表违反了HTML的表模型,因为当前没有从第3列或第4列开始的单元格...
bvn4nwqk2#
colspan
确定单元格重叠的列数,而不是这些列的大小。使用CSSwidth
属性指定内容的宽度。s2j5cfk03#
只有
display: table-cell
实现colspan
的行为,因此应用任何其他display
值将导致忽略该属性。如果你想对一个单元格的内容使用其他的
display
算法,你可以使用一个 Package 器: