为什么 colspan 没有按预期应用

发布于 2025-01-04 14:40:32 字数 697 浏览 0 评论 0原文

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

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

原文

I have a table according to below. The second row has defined three columns, one with colspan=8 and the others with colspan=1. Still, the cells are not stretched according to the colspan, the "width" are a little bit more for second cell and widest for the third.

<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>

What's the problem and how to fix it?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

花海 2025-01-11 14:40:32

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

The widths of cells depend on cell contents, HTML and CSS settings for widths, browser, and possibly phase of the moon. The colspan attribute just specifies how many columns (hence, how many slots in the grid for the table) a cell occupies.

If you see the last cell of row 2 as the widest, then the reason is probably that it has most contents (or there is a width setting for it). Your demo code does not demonstrate such behavior.

If you don’t want the column widths adjust to the size requirements of cells, set the widths explicitly in CSS (or in HTML). Before this, it is best to remove all unnecessary complications from the table structure. If your demo code reflects the entire structure, then columns 2 through 8 are an unnecessary division, i.e. they could be turned to a single column. Demonstration (with poor-style pixel widths just for definiteness):

<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>

Without a rewrite like this, I’m afraid your table violates the table model of HTML, as currently there is no cell that starts in column 3 or column 4 or...

回复收藏 0 原文

秋凉 2025-01-11 14:40:32

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

回复收藏 0 原文

晚雾 2025-01-11 14:40:32

只有 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>

Only display: table-cell implements the behavior for colspan, so applying any other display value would cause the attribute to be ignored.

If you want to use some other display algorithm for the content of a cell you could use a wrapper:

<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>

回复收藏 0 原文