Is it possible to generate callout/indicator ("continues...") when table breaks across column or page?

Question

We are designing HTML pages for print and one of the requirements for tables is, whenever a page or column break occurs, to generate an indicator like "Continues..." below the table before the break (page or column) and in the header of the continuation of the table, another indication, like table title and the text "Continued", followed by the normal flow of the content.

For the top-level container, we are planning to use CSS multi-columns and normal html table element for the table. It seems CSS columns do not expose any pseudo-classes to decorate the column breaks.

Below is the layout I'm looking for,

I'm open to javascript options as well @evolutionxbox. Can you think of something using js? — sadiq.ali, May 24 '20 at 05:34
This entirely depends on your existing html and the frameworks you're currently using. — Joundill, May 28 '20 at 05:07
You might find [table-header-group](https://stackoverflow.com/questions/1763639/how-to-deal-with-page-breaks-when-printing-a-large-html-table) useful. — kmoser, May 28 '20 at 06:22
How do you chop the table and how are you repeating these elements? — Deepak Terse, May 28 '20 at 07:07
I've added an answer but if you share more about the implementation approach you took/will take then we can give more precise hints. — Cortex, May 28 '20 at 07:22

score 2 · Answer 1 · answered May 28 '20 at 06:57

Here's how I'd approach it:

Put hidden div above table

<div id="cont-label" style="display:none;">Continues...</div>

Know table size

By either sending its size to UI, or getting its size usign javascript:

var size= $('#mytable tr').length;

size is saved in javascript or in table div data attribute data-size=12

Know if table is "chopped"

If table on home is displaying a number of rows that's less than table size, either by counting rows or by having fixed number of rows displayed (depends on your design). Let's say displayed size is displayedSize.

Compare and act

Better to be in jQuery Get both size and displayedSize and compare:

if( displayedSize < size ){
  $("#cont-label").show();
}

I will assume that the next page will always show the text "Continued" because otherwise why have full page for table in the first place. I see you display the whole table and not the chopped part only ad this makes implementation easier, please correct me.

Is it possible to generate callout/indicator ("continues...") when table breaks across column or page?

1 Answers1