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

Question

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?

Answer 1

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.

Answer 2

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";
  }
}

<table>
  <tfoot>
    <tr>
      <th><span>Footer</span></th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td><span>A</span></td>
    </tr>
  </tbody>
</table>

But even though when printing a HTML page containing a <table> that is too long to fit on one single page it is spread over multiple pages and the <tfoot> (and/or <thead>) is repeated on each page. There is still just one actual <tfoot> element in the HTML document and as far as I know CSS doesn't allow to select specific occurrences. And thus it is only possible to modify all of the repetitions (instead of for example all but the last one in our case).

Answer 3

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/

Answer 4

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>
<table><tfoot></tfoot></table>
<table><tfoot></tfoot></table>
<table><tfoot></tfoot></table>
<table><tfoot></tfoot></table>
<table><tfoot></tfoot></table>
<table><tfoot></tfoot></table>
<table><tfoot></tfoot></table>
<table><tfoot></tfoot></table>