0

I am creating a very complex view to correlate groupings of tabular data with totals that all need to align together. To do this I've come up with the following HTML:

<table>
    <tr class="header_row"></tr>
    <tr class="inner_group_row"></tr>
    <tr class="data_row"></tr>
    <tr class="data_row"></tr>
    <tr class="inner_group_row"></tr>
    <tr class="data_row"></tr>
    <tr class="spacer_row"></tr>
    <tr class="header_row"></tr>
    <tr class="inner_group_row"></tr>
    <tr class="data_row"></tr>
    <tr class="data_row"></tr>
    <tr class="spacer_row"></tr>
    <tr class="totals_row"></tr>
    <tr class="average_row"></tr>
</table>

This works fine, but the end game is that the user can click a button and render this out to a PDF that they will then be given to download (based on filters and other things they change on the fly).

When the PDF is generated (via EvoPdf) I want to make sure that page breaks don't break up a grouping, so I modified the HTML to be like so:

<table>
    <tbody class="data_group">
        <tr class="header_row"></tr>
        <tr class="inner_group_row"></tr>
        <tr class="data_row"></tr>
        <tr class="data_row"></tr>
        <tr class="inner_group_row"></tr>
        <tr class="data_row"></tr>
        <tr class="spacer_row"></tr>
    </tbody>
    <tbody class="data_group">
        <tr class="header_row"></tr>
        <tr class="inner_group_row"></tr>
        <tr class="data_row"></tr>
        <tr class="data_row"></tr>
        <tr class="spacer_row"></tr>
    </tbody>
    <tbody class="totals_group">
        <tr class="totals_row"></tr>
        <tr class="average_row"></tr>
    </tbody>
</table>

<style>
    .data_group, .totals_group { page-break-inside: avoid; }
<style>

Now if the 2nd data_group as a whole doesn't fit on the first page it's now correctly putting the 2nd data_group onto a new page. Perfect.

Except when a data_group is bigger than a single page. Then I'd like to try and at least make all rows related to the inner grouping stay together. However, this has me stumped as you cannot nest <tbody> tags inside each other.

At this point I am stumped on how to group several rows together when they've already been grouped at a higher level.

Note that all rows (even inner_group_row rows) have tabular data that all needs to line up with all other rows in the whole table,

KallDrexx
  • 27,229
  • 33
  • 143
  • 254
  • A table can have multiple tbody elements. You could put your header rows in thead and totals in tfoot and group actual data in different tbody elements. – Anthony Jun 03 '15 at 16:24
  • The requirements I have is that each `data_group` needs to redisplay the headers, for this report to look as specced and the customer wants. – KallDrexx Jun 03 '15 at 16:29
  • Soooo, it sounds like you don't care about doing it correctly, so group your rows however you want. Add yet another class like "group1" – Anthony Jun 03 '15 at 16:32
  • Also, the browser will print the thead rows on each page the table spans. Another point for doing it correctly – Anthony Jun 03 '15 at 16:36
  • Sorry, I mis-interpreted your `` for ``. Now your comment makes sense and I will give that a shot, I did not know that happened actually and will give that a shot. However, if I still need to group other rows together outside of the outer and inner group (inner inner group) then `thead` doesn't help – KallDrexx Jun 03 '15 at 16:55
  • @sdcr: typo on my part, meant `tr` not `td` – KallDrexx Jun 03 '15 at 16:57
  • @Anthony: Actually `` doesn't work, because if there are multiple groupings on the same page the customer needs the header on each grouping. `thead` will only do one per page. Not a matter of doing it "correctly" but making it looks as the customer expects, which `thead` doesn't. – KallDrexx Jun 03 '15 at 17:05
  • @KallDrexx no experiences on that, just wondering if this could help - http://stackoverflow.com/questions/8712677/how-to-apply-css-page-break-to-print-a-table-with-lots-of-rows – Stickers Jun 03 '15 at 17:11

0 Answers0