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

Question

我有一张表，其列数取决于我收到的数据，是动态列数。 我有一个标签需要跨越所有列，不受表格中列数的影响。

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

在Firefox上运行正常，在Chrome和IE8上无法正常工作 :(

编辑2

使用colspan = '100%'能够解决跨浏览器的问题，可以参考这个链接：https://dev59.com/NnRC5IYBdhLWcg3wJNgN#5028091

- Vikram

---

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

谢谢njk...我只是想知道是否有一种方法可以让页脚（在我的情况下只有一列宽）跨越整个表格的宽度...也许使用CSS？ - Vikram

你当然可以完全放弃使用表格，转而采用CSS方法。但是，如果你要显示数据，表格仍然是最好的选择。 - Kermit

从技术上讲（我知道这似乎很奇怪！），但tfoot标签应该紧接在thead标签之后，而tbody标签应该最后出现。 - Sean

Answer 1

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

编辑：这种做法虽然被W3C推荐，但不是跨浏览器的。请小心使用！

- albertedevigo

---

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

引用链接：http://www.w3.org/TR/html4/struct/tables.html 和 http://www.w3.org/wiki/HTML/Elements/tfoot - albertedevigo

我会进行编辑，因为你是对的，那不是一个100%跨浏览器的解决方案。谢谢！ - albertedevigo

来自www.w3.org的@njk：COLSPAN，例如<TD COLSPAN=2>一个正整数值，定义了此单元格跨越的列数。默认的COLSPAN是1。COLSPAN=0具有特殊意义，并暗示该单元格跨越当前列到表的最后一列的所有列。 - Phillip Schmidt

+1 for "<tfoot> 应该放在 <thead> 和 <tbody> 之间"。我在 Chrome 中遇到了一个奇怪的问题，底部边框没有渲染整个表格宽度。将 <tfoot> 移动到符合规范的位置解决了这个问题。 - Altay_H

Answer 2

在colspan中填入一个非常大的数字（比如colspan="9999"），并在表格元素中添加样式table-layout: auto。

- Robert Henderson

Answer 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>的替代方法。

- Phillip Schmidt