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

Question

我有一个带有大量行的html表格，当我尝试打印它时，TFOOT中的内容会在每个页面断点处显示。我能否使其仅在最后一页的表格末尾显示？

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

- Mahesh

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

- Jukka K. Korpela

---

tbl.tFoot 是 gEBTN 的一个更短的替代方式。 - Dennis