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

确定单元格重叠的列数，而不是这些列的大小。使用 CSS

width

属性来指定事物的宽度。

Answer 3

仅

display: table-cell

实现

colspan

的行为，因此应用任何其他

display

值都会导致该属性被忽略。

---

如果您想对单元格的内容使用其他

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>

Answer 4

我在 colspan 对齐方面也遇到了类似的问题。经过相当多的尝试和错误后，我发现这是 td 单元格的问题，该单元格具有指定“display: inline-block;”的 css 类。一旦我删除了我的所有表格列就正确对齐了。