表格页脚自动跨越表格宽度

Posted 2023-03-05

【中文标题】表格页脚自动跨越表格宽度

【英文标题】：Table footer auto spanning across width of table

【发布时间】：2012-09-05 14:38:06

【问题描述】：

我有一个表，其中包含 动态列数，具体取决于我收到的数据。 我有一个标签，它需要分布在所有列中，与表中的列数无关。

<table>
<thead>
<tr>
<th><span>ColA</span></th>
<th><span>ColB</span></th>
<th rowspan='2'><span>Col<br/>  C</span></th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<td>Footer content here</td>
</tr>
</tfoot>
</table>

编辑 colspan = 0 为我工作！

<td colspan='0'>Footer content here</td>

适用于 FF，但不适用于 Chrome、IE8 :(

编辑 2

colspan = '100%' 此链接解决了跨浏览器问题 https://***.com/a/5028091/405117

【问题讨论】：

您需要知道列数或在下面创建一个单独的表格。

谢谢njk ....我只是想知道是否有一种方法可以使页脚（在我的情况下只有一列宽）可以分布在表格的宽度上...也许使用css ?

您当然可以从完全使用表格转向 CSS 方法。但是，如果您要显示数据，表格仍然是可行的方法。

技术上（我知道这看起来很奇怪！）但是 tfoot 标签应该紧跟在 thead 标签之后，而 tbody 标签应该在最后

【参考方案1】：

使用colspan="0" 顺便说一句，你的<tfoot> 应该在<thead> 和<tbody> 标签之间。

编辑：W3C 推荐的这种做法不是跨浏览器的。谨慎使用！

【讨论】：

并非所有浏览器都支持此功能。事实上，我上次检查过（前段时间还不错），只有 firefox 支持。

W3C 说： colspan = number [CN] 此属性指定当前单元格跨越的列数。此属性的默认值为一（“1”）。值零（“0”）表示单元格跨越从当前列到定义单元格的列组 (COLGROUP) 的最后一列的所有列。

我以前从未见过这个。你能提供一些文件吗？

关于 tfoot，W3C 说：作为 table 元素的子元素，在任何 caption、colgroup 和 thead 元素之后以及任何 tbody 和 tr 元素之前，但前提是没有其他 tfoot 元素表格元素的子元素。

@simbirsk 是的，它从第一天起就在 W3C 规范中。不过，仍然取决于浏览器是否支持它。我猜所有较新的浏览器都支持它，但我会小心旧版本

【参考方案2】：

在 colspan 值中放入一个高得离谱的数字（即colspan="9999"）并将样式table-layout: auto 添加到您的表格元素中。

【参考方案3】：

使用colspan。您需要通过 jQuery 获取列数，然后设置要拉伸的表格行的 colspan，如下所示：

function ColumnCount()
    var numCols = $("#YourTableID").find('tr')[0].cells.length;
    $('tfoot tr').attr('colspan', numCols.toString());

然后您需要将 ID YourTableID 提供给表，如下所示：

<table id="YourTableID">

代替<table>。