为什么colspan没有按照预期生效。

Question

为什么colspan没有按照预期生效。

20

我有一个如下表格。第二行定义了三列，其中一个使用了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

1

包含10个单元格的行在哪里？ - ZippyV

那是第一行。我需要用某种方式定义有10个单元格的行吗？ - Nicsoft

3个回答

8

colspan决定了一个单元格横跨的列数，而不是这些列的大小。使用CSS的width属性来指定事物的宽度。

- Quentin

其实我所说的并不是单元格的数量，只是我的措辞可能有点不清楚。我会改正它。 - Nicsoft

1

只有 display: table-cell 实现了 colspan 的行为，因此应用任何其他的 display 值都会导致该属性被忽略。

如果你想要使用其他的显示算法来展示单元格的内容，你可以使用一个包装器：

<td colspan="2"> <!-- the cell is still `display: table-cell` -->

  <div style="display: grid"> <!-- the wrapper can have any `display` rule you need -->

    <!-- the cell content -->

  </div>

</td>

- cmolina

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jukka K. Korpela · Accepted Answer

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