如何使 TFOOT 仅显示在表格的末尾

Question

我有一个包含大量行的 html 表，当我尝试打印它时，TFOOT 中的内容会显示在每个分页符中。我可以让它只显示在最后一页表格的末尾吗？

注意：我无法从表格中删除 tfoot，因为表格是从我正在使用的 yii 框架的 CGridView 输出的。

Answer 1

恐怕只能通过脚本来完成。默认情况下，tfoot 元素具有display: table-footer-group，这意味着它出现在表格的任何其他行之后）。在当前的 CSS 中，你不能将这两个东西分开。

如果设置tfoot { display: table-row-group }，则不会重复，但不会出现在表格的最后，而是出现在与HTML源代码相同的位置，也就是说在开头，之前普通行，按 HTML 4 语法。我假设它在 HTML 代码中，您无法更改它。 （实际上tfoot 可以放在表格标记的最后，HTML5 允许这样做。）

你可以通过设置tfoot { display: none } 完全去掉页脚，但我想你不希望这样。

如果可以在此处使用客户端脚本，那么您可以将display 设置为table-row-group 以及将tfoot 元素移动到表中最后的代码。假设table 元素有id，比如id=tbl，您可以使用以下脚本（也设置display）：

var tbl = document.getElementById('tbl');
var foot = tbl.getElementsByTagName('tfoot')[0];
foot.style.display = 'table-row-group';
tbl.removeChild(foot);
tbl.appendChild(foot);

如果table 元素缺少id，您需要一些不同的方式在JavaScript 中查找该元素，具体取决于页面的结构。如果它是唯一的或第一个 table 元素，您可以将上面的第一行替换为

var tbl = document.getElementsByTagName('table')[0];