Repeat only some of the rows in THEAD when printing multi-page table in HTML

Question

I need to do this trick while printing huge HTML tables:

+-----+---------+-----+
|  ID |  Title  | Qty |  ⇐ descriptive header that shouldn't repeat
+-----+---------+-----+
|  1  |    2    |  3  |  ⇐ column number that **SHOULD** repeat
+-----+---------+-----+
| aaa | bbb     |   0 |  ⇐ data; rows upon rows of data

  ...     ...     ...

+-----+---------+-----+
|  1  |    2    |  3  |  ⇐ page 2
+-----+---------+-----+
| xxx | yyy     | 999 |
  ...     ...     ...

Is it possible to implement without resorting to "2 tables with fixed layout" solution (I really don't want to use fixed values)? Oh, and I can only use HTML and CSS.

If it helps, I only target IE (6 and up).

More info

So far, I've tried these different hacks, but to no avail:

1. no thead, second row gets th instead of td

   1.1. even with style="display:table-header-group" on that tr

2. in thead, using td instead of th for the first row

   2.1. using style="display:table-row-group" on thead and style="display:table-header-group" on the second row in it

3. variations of inserting thead in the middle of tbody (as per one of the answers that disappeared)

I'm starting to accept that it isn't possible and that I'll have to resort to that fixed layout setup (but I pray that leaving only one flexible-width column will be enough) :-(

Answer 1

Support is still rare, but you can do this with the right renderer:

Dcoumentation: http://www.w3.org/TR/css3-page/ and http://dev.w3.org/csswg/css-gcpm/

Popular Engines with support: http://weasyprint.org/docs/features/ and http://www.princexml.com/doc/9.0/page-headers-footers/

I'm also working to get support included in WKHTMLTOPDF

Answer 2

Based on the idea that you want this table to flow nicely on to separate "pages" on a device's screen (I still don't follow exactly what you mean by that), I would go with paginating your single table with javascript.

For your 2nd header in the first page of your table, I would use javascript to insert an extra row at the beginning of the table, give the a class and add in the column numbers programatically. I can expand on this if you need me to.