When a TABLE spans multiple pages, how can I make the TFOOT on the first page say "continued..."?

advanced html tables examples
html table examples
html table border
html multiple tables on one page
html table row group example
html table style
html table multiple header rows
html table title

In an HTML document built up by a template engine, I have a table of accounting data -- a variable number of lines, with a "grand total" at the bottom. Sometimes this table spills over onto another page. When it does so, it's not obvious to the user that there's more data on another page, unless he's looking for the total and can't find it.

So, I put the grand total line in a TFOOT, so it would be printed on each page. Even if the user misses some of the line items, he can see the total right on the first page of the report.

What I'd like to do instead of printing the total is to print something like "(continued on next page)" at the bottom of the first page (where the TFOOT is dynamically inserted by the browser) and have the grand-total line print only on the last page that the table spans.

Is it possible to use HTML, CSS, or Javascript, to insert a "(continued...)" message at the end of every page that a multi-page table spans?

You could start by creating a media query containing your print styles and using content to add the "(continued...)" message.

@media print {
  tfoot::after {
    content: " continued...";

Of course, the difficult part is to remove it on the last page. You may be able to accomplish that using Prince. Specifically, check the Two-Pass Solution.

Tables in HTML documents, Table Captions: The CAPTION element; Row groups: the THEAD , TFOOT , and Cells may span multiple rows and columns. Not only do these mechanisms greatly assist users with visual disabilities, they make it Visual user agents should format the table according to HTML attributes and style sheet specification . Browsers can use this information to enable scrolling of the table body independently of the header and footer - particuarly useful for large tables. Also, when printing a large table that spans multiple pages, this information can enable the table header and footer to be printed at the top and bottom of each page.

No, to my knowledge it is not possible, at least not with CSS only.

Intuitively, a solution could be something of the sort:

@media print {
  tfoot:not(:last-child) span::after {
    content: "\2014 continued\2026";

Why not use <thead> to include row headings?, Do the table headings only have column headings? “The table It means when you have a table spanning multiple pages, the table head (and <tfoot> ), will always render at the top and bottom of the page. You can also use That is to say, the THEAD can only contain the table heading(column headings). Creating Tables that spans several pages I am working with word 7 and have created a table that should go to the second page however the table stays on the same page and covers both the header and the footer.

It is possible if you are aware of data-tables. Data tables is a jquery plugin to your page which will insert pagination and total amount of pages your template/table contains. It'll be helpful to users to get proper idea about how many records you have. and at last row using colspan, you can always show the total. Rather than inserting 'Continue..', you will be able to show the count of total records.

For your reference check the data tables documentation: https://datatables.net/

HTML tfoot tag, The <tfoot> tag is used to group footer content in an HTML table. printing a large table that spans multiple pages, these elements can enable the table header and footer to be printed at the top and bottom of each page. Get Certified �� Select multiple table cells by holding down Shift and clicking. (This is an efficient method for selecting the first row of data cells in a table which need to be changed to header cells.) Some properties for multiple cells can be set at once thus saving time tagging large and complex tables.

Have you tried to use onbeforeprint? According to MDN:

...These events are raised before the print dialog window is opened... allow pages to change their content before printing starts...

So something general like this should work:

window.onbeforeprint = (event) => {
  const footers = document.querySelectorAll('tfoot');
  for (var i=0; i < footers.length; i++) {
    footers[i].innerHTML = 'continue...';
  document.querySelector('table:last-of-type tfoot').innerHTML = 'last one';  
<h1>Hit conrtol+p or any other method for printing</h1>

Tfoot print only last page, Is there a way I can make my 1st row invisible only when the first page is printed. Tech support said "the option to [print last page first] does not exist for my printer. In paged media, if a table spans across multiple pages, footer rows are � Allows a single table cell to span the height of more than one cell or row. Why use colspan= or rowspan= ? Sometimes it makes sense for a cell to span multiple columns or multiple rows.

HTML Tables: All there is to know about them, A table in HTML makes a lot of sense when you want to organize data Table cells contain the header information and/or data and they can span multiple columns and All rows must be within either the <;thead>, <tbody>, or <tfoot>. For instance, if you tell the table itself to be 400px wide then the first� In an HTML document built up by a template engine, I have a table of accounting data -- a variable number of lines, with a "grand total" at the bottom. Sometimes this table spills over onto anothe

The Ultimate Print HTML Template with Header & Footer, Every page must have a branded header and footer. Content may span over multiple pages. I was surprised to learn this is not as easy as you� 1. Add the caption to the table following the guidelines in Using the Issuance Template’s MS Word Features. Place cursor in the row of the table that will become the first row on the second page (in this example, it is the last row on the first page, since it splits across the page). 2.

Table Header fields overlapping data when table spans 2 pages , Our requirement we need to get the data data from DB means dynamic data. I could resolve this issue by removing all CSS and incrementally adding only the Bottom overlapping onto header of next page rdvojmoc/DinkToPdf#23 thead { display: table-row-group;} tfoot { display: table-row-group } tr� Specifies the number of rows a cell should span. Note: rowspan="0" tells the browser to span the cell to the last row of the table section (thead, tbody, or tfoot). Chrome, Firefox, and Opera 12 (and earlier versions) support rowspan="0".

  • Just checking: when you say the table spills onto another page, what do you mean by "page" precisely? Do you mean the table has a set number of visible rows and a pagination system?
  • Can the downvoter explain why? seems that it actually find each tfoot as OP asked, change the content (with innerHTML that can switched to any other method) and change the last one to something else (OP didn't put his code so i put some general string).
  • The original question is about one long table spreading over multiple pages, so that there is one single <tfoot> displayed multiple times. This answer is based on multiple tables.
  • @sinoroc i thought OP say that he got on every page tfoot that display the same string ("total... etc) and he want to change it to 'continue'...
  • Yes that's a thing that happens automatically when a HTML page is printed. If a single <table> spreads over multiple pages, then the <tfoot> and <thead> are repeated on each page. So there's just one of each in the HTML document, but they appear multiple times. So as far as I know CSS doesn't allow to select specific occurrences of those, and thus it is only possible to modify all of the repetitions (instead of all but the last one in our case).