html - 如何让 TFOOT 只显示在表格的末尾

Question

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

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

Answer 1

除了脚本，恐怕无法完成。默认情况下，tfoot 元素具有 display: table-footer-group ，这意味着它出现在表的任何其他行之后并且可以在每个页面的末尾重复(如果浏览器想要这样做)。在当前的 CSS 中，您不能将这两件事分开。

如果设置tfoot { display: table-row-group }，则不会重复，但不会出现在表格的末尾，而是和in在同一个地方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];