如何使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];