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