Grouping table rows and page breaks

Question

I have a relatively long table. Each record has six rows. So an item with an identifier of 16 has <tr-16-1><tr-16-2>.....<tr-16-6>, identifier 25 would be <tr-25-1><tr-25-2>.....<tr-25-6>, etc.

I would like the page breaks to not split any grouping of the six rows. So if <tr-25-6> would continue on a new page, I would like all <tr-25's> to break with it.

I can easily attach a class to all six rows if that would help. Can anyone please point me in the right direction on how to do this? Thanks so much for your help.

when say _on a new page_ are you talking about print rules? – Fabrizio Calderan May 15 '12 at 11:36 — Fabrizio Calderan, May 15 '12 at 11:36

score 5 · Answer 1 · edited May 23 '17 at 12:15

5

A possibility is grouping all the rows that are referring to the same record inside a single tbody, so you have more tbody each one containing 6 rows (it's perfectly fine and seems to be logical as an atomic group), then add this rule for media print

@media print {
    tbody {
        page-break-inside: avoid;
    }
}

In this way a page break inside a tbody will be avoided.
Unfortunately page-break-inside is supported on every modern browser except Firefox (Bug #132035)

edited May 23 '17 at 12:15

Community

1
1

answered May 15 '12 at 11:44

Fabrizio Calderan

120,726
26
164
177

1

Just gave that a try - wrapped all the tr groups in their own tbody tags but, unfortunately, it didn't solve the problem. I tried in both Chrome and IE. – M Becker May 15 '12 at 15:00
could you post an example fiddle with some data and update your question? I'll try to investigate further – Fabrizio Calderan May 15 '12 at 15:03
1

Thanks so much. I posted a sample at http://jsfiddle.net/wKvuP/. You may need to repeat the data in order to create enough info for a page break. Thanks again for your help. – M Becker May 15 '12 at 16:09

score 1 · Answer 2 · answered May 25 '16 at 19:38

1

I would give this a shot:

@media print {
    tr, td, th { page-break-inside:avoid }
}

answered May 25 '16 at 19:38

lautomator

11
2

score 1 · Answer 3 · answered May 30 '16 at 07:02

1

If you don't want to use the @media tag, this is another way:

Add class=print-entire to your table, and add this style:

table.print-entire tr td, table.print-entire tr th {
        page-break-inside: avoid;
    }

answered May 30 '16 at 07:02

Sampada

2,931
7
27
39

Grouping table rows and page breaks

3 Answers3