具有动态列的表布局固定和整行 colspan

Posted 2023-03-05

【中文标题】具有动态列的表布局固定和整行 colspan

【英文标题】：Table-layout fixed and full row colspan with dynamic columns

【发布时间】：2017-07-09 00:11:12

【问题描述】：

我试图设置表格列的宽度，但我注意到当它在 FF 中工作时，它在 Chrome/Edge 中被完全忽略。修复非常简单 - 将表格布局设置为固定。

它使所有浏览器都尊重列宽，但突然之间，只有一个单元格的行需要跨所有列跨度开始表现不佳。由于他们将 colspan 设置为 20（比实际列多），因此他们开始实际跨越不存在的列破坏布局。

修复也很容易 - 将 colspan 设置为实际的列数。不幸的是，它们是动态的，并且因用户而异。但是我仍然需要一个单元格来跨越所有表格。

每次生成表格并将其放入 colspan 时，我都可以计算列数，但这远不是理想的解决方案。我不应该仅仅为了愚蠢的格式而实现这种逻辑并弄乱实际逻辑。

问题：如何使colspan覆盖固定布局表中的所有列而不指定每次生成表时的列数？

【参考方案1】：

我找到了解决这个问题的解决方案，或者更确切地说是“肮脏的黑客”。由于我设置的 colspan 似乎没有办法做到这一点：

表：

表格布局：固定；

需要 colspan 的表格行：

身高：28；

表格单元格到 colspan：

位置：绝对； 宽度：100%； 行高：28px； 文本对齐：居中；

这样，即使理论上单元格仅覆盖第一列，它也会“浮动”在整行上方，并且由于它的宽度设置为 100%，它完全覆盖它的方式与将 colspan 设置为列数的方式相同。

[https://jsfiddle.net/abvL5jbd/][Demo]

适用于 FF、Chrome、Edge。