开发者

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

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开发者_Python百科 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) :-(


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


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.


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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜