title: How do I have multiple levels of page break avoidance within a table?
body: <p>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:</p>
  
  <pre><code>&lt;table&gt;
      &lt;tr class="header_row"&gt;&lt;/tr&gt;
      &lt;tr class="inner_group_row"&gt;&lt;/tr&gt;
      &lt;tr class="data_row"&gt;&lt;/tr&gt;
      &lt;tr class="data_row"&gt;&lt;/tr&gt;
      &lt;tr class="inner_group_row"&gt;&lt;/tr&gt;
      &lt;tr class="data_row"&gt;&lt;/tr&gt;
      &lt;tr class="spacer_row"&gt;&lt;/tr&gt;
      &lt;tr class="header_row"&gt;&lt;/tr&gt;
      &lt;tr class="inner_group_row"&gt;&lt;/tr&gt;
      &lt;tr class="data_row"&gt;&lt;/tr&gt;
      &lt;tr class="data_row"&gt;&lt;/tr&gt;
      &lt;tr class="spacer_row"&gt;&lt;/tr&gt;
      &lt;tr class="totals_row"&gt;&lt;/tr&gt;
      &lt;tr class="average_row"&gt;&lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>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).</p>
  
  <p>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:</p>
  
  <pre><code>&lt;table&gt;
      &lt;tbody class="data_group"&gt;
          &lt;tr class="header_row"&gt;&lt;/tr&gt;
          &lt;tr class="inner_group_row"&gt;&lt;/tr&gt;
          &lt;tr class="data_row"&gt;&lt;/tr&gt;
          &lt;tr class="data_row"&gt;&lt;/tr&gt;
          &lt;tr class="inner_group_row"&gt;&lt;/tr&gt;
          &lt;tr class="data_row"&gt;&lt;/tr&gt;
          &lt;tr class="spacer_row"&gt;&lt;/tr&gt;
      &lt;/tbody&gt;
      &lt;tbody class="data_group"&gt;
          &lt;tr class="header_row"&gt;&lt;/tr&gt;
          &lt;tr class="inner_group_row"&gt;&lt;/tr&gt;
          &lt;tr class="data_row"&gt;&lt;/tr&gt;
          &lt;tr class="data_row"&gt;&lt;/tr&gt;
          &lt;tr class="spacer_row"&gt;&lt;/tr&gt;
      &lt;/tbody&gt;
      &lt;tbody class="totals_group"&gt;
          &lt;tr class="totals_row"&gt;&lt;/tr&gt;
          &lt;tr class="average_row"&gt;&lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  
  &lt;style&gt;
      .data_group, .totals_group { page-break-inside: avoid; }
  &lt;style&gt;
  </code></pre>
  
  <p>Now if the 2nd <code>data_group</code> as a whole doesn't fit on the first page it's now correctly putting the 2nd <code>data_group</code> onto a new page.  Perfect.</p>
  
  <p>Except when a <code>data_group</code> 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 <code>&lt;tbody&gt;</code> tags inside each other.</p>
  
  <p>At this point I am stumped on how to group several rows together when they've already been grouped at a higher level.  </p>
  
  <p>Note that all rows (even <code>inner_group_row</code> rows) have tabular data that all needs to line up with all other rows in the whole table,</p>