How to make TFOOT to show only at the end of the table

Question

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.

Answer 1

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