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

As it turns out, you can’t do this kind of thing.

The closest solution depending on your requirement will be to use two fixed-layout tables upon each other OR to hard-break the table in parts guaranteed to be fitting on one page.