Question

When printing an HTML table, you can use CSS to force the table’s header row to display again after the page break. This style:

@media print {
   thead { display: table-header-group; }
}

Results in:

Caption
-------------
Col1  | Col2
-------------
Data1 | Data2
Data3 | Data4

--Page Break--

Col1  | Col2
-------------
Data5 | Data6

Is there a way to also repeat the table caption after the page break? I would think you could do something like caption { display: table-caption-group; }, but this doesn’t exist. The solution would need to work in IE9.

Answer 1

I’m afraid there is no way to achieve that. In principle, you can set caption { display: table-caption-group; }, but by the specs, “If a table contains multiple elements with ‘display: table-header-group’, only the first is rendered as a header; the others are treated as if they had ‘display: table-row-group’.” So you would not be able to make both the thead and the caption repeat. Besides, IE 9 does not get even let you repeat caption alone (Firefox does).

The workaround is to turn the caption element to a table row that is part of the thead element. E.g., for a two-column table:

<table>
<thead>
<tr><th colspan=2>Caption
<tr><th>Header cell <th>Another header cell
</thead>