如何使TFOOT仅在表格末尾显示 [英] How to make TFOOT to show only at the end of the table

问题描述

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

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

解决方案

恐怕除了使用脚本之外无法完成。默认情况下， 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 元素移动即可。假设表元素具有 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）; 
  

如果表元素缺少 id ，你需要一些不同的方式来找到JavaScript中的元素，这取决于页面的结构。如果它是唯一的或第一个表元素，那么您可以将上面的第一行替换为

  var tbl = document.getElementsByTagName（'table'）[0]; 
  

I have an html table with a large number of rows and when I'm trying to print it, the content in TFOOT is showing in every page break. Can I make it to show only at the end of the table in the last page?

Note: I can't remove the tfoot from the table because the table is output from CGridView of yii framework which I'm using.

解决方案

I’m afraid it can’t be done except with scripting. By default, the tfoot element has display: table-footer-group, which means that it appears after any other rows of the table and may be repeated at the end of each page (if the browser wants to do that). You cannot separate these two things in current CSS.

If you set tfoot { display: table-row-group }, it won’t be repeated, but it won’t appear at the end of the table but in the same place as in the HTML source, which means that it is at the start, before normal rows, by HTML 4 syntax. I’m assuming it’s there in the HTML code and you cannot change this. (In fact tfoot can be placed last in the table markup, and HTML5 allows this.)

You can get rid of the footer altogether by setting tfoot { display: none }, but I presume you don’t want that.

If client-side scripting can be used here, then you could set display to table-row-group together with code that simply moves the tfoot element last in the table. Assuming the table element has id, say id=tbl, you can use the following script (which also sets display):

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

If the table element lacks id, you need some different way to find the element in JavaScript, depending on the structure of the page. If it is the only, or the first, table element there, you can replace the first line above by

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

这篇关于如何使TFOOT仅在表格末尾显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！