2

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.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Brian Koser
  • 439
  • 1
  • 12
  • 28

1 Answers1

5

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>
Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • 1
    That's the conclusion I came to also. I had hoped I could do it more semantically, but I guess I should be happy that it's possible at all, considering the low support of CSS printing features. – Brian Koser Sep 20 '12 at 21:25