Avoid page break happening between two specific rows

Question

This answer helps to avoid a page break inside a single row of a table, however I am looking for a way to prevent a page break from occurring between two different rows. Let me explain my situation (apologies for formatting):

header: | Col1 | Col2 | Col3 | Col4 |

row 1: | Val1 | Val2 | Val3 | Val4 |

row 2: | Value relating to 1,2,3,4 |

row 3: | Val5 | Val6 | Val7 | Val8 |

row 4: | Value relating to 5,6,7,8 |

I have a table in which every two rows are related to each other, and should not be shown on separate pages. The second row in each pair has a single value that should be able to span over all the columns of that row.

I have tried the following using page-break-inside: avoid:

1. Putting the two rows inside a <div> tag
2. Having Col4 span over both rows (Col4 content just moves to next page)
3. Putting both rows into a table (loses alignment with headings)

Answer 1

You could use nested tables, i.e. each of the td cells in your current rows 1 and 3 could contain a table consisting of 1 column and 2 rows with 1 cell each, with the cell in the second row containing the related value to the first row.

So your rows 1 and 2 would become one row with 4 cells, each containing a nested table consisting of 2 rows with 1 cell each. The same for your current rows 3 and 4 etc.

Then you could apply page-break-inside: avoid to these nested tables.

.maintable {
  width: 100%;
  border-collapse: collapse;
}

.maintable > tbody > tr > th, .maintable > tbody > tr > td {
  border: 1px solid #ddd;
}
.maintable > tbody > tr > td > table {
page-break-inside: avoid;
  width: 100%;
border-collapse: collapse;
}
.maintable > tbody > tr > td > table tr:first-child td {
  border-bottom: 1px solid #ddd;
}

<table class="maintable">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
    <th>Header 4</th>
  </tr>
  <tr>
    <td>
      <table>
        <tr>
          <td>value 1</td>
        </tr>
        <tr>
          <td>related value 1a</td>
        </tr>
      </table>
    </td>
    <td>
      <table>
        <tr>
          <td>value 2</td>
        </tr>
        <tr>
          <td>related value 2a</td>
        </tr>
      </table>
    </td>
    <td>
      <table>
        <tr>
          <td>value 3</td>
        </tr>
        <tr>
          <td>related value 3a</td>
        </tr>
      </table>
    </td>
    <td>
      <table>
        <tr>
          <td>value 4</td>
        </tr>
        <tr>
          <td>related value 4a</td>
        </tr>
      </table>
    </td>
  </tr>
<tr>
    <td>
      <table>
        <tr>
          <td>value 5</td>
        </tr>
        <tr>
          <td>related value 5a</td>
        </tr>
      </table>
    </td>
    <td>
      <table>
        <tr>
          <td>value 6</td>
        </tr>
        <tr>
          <td>related value 6a</td>
        </tr>
      </table>
    </td>
    <td>
      <table>
        <tr>
          <td>value 7</td>
        </tr>
        <tr>
          <td>related value 7a</td>
        </tr>
      </table>
    </td>
    <td>
      <table>
        <tr>
          <td>value 8</td>
        </tr>
        <tr>
          <td>related value 8a</td>
        </tr>
      </table>
    </td>
  </tr>
  </table>

Answer 2

You should use multiple <tbody> tags instead of <div>. The property page-break-inside: avoid must be set on the <tbody>.

In a HTML table you can set only one <thead> and <tfoot>, but several <tbody>.

Answer 3

<style type="text/css">
        table{
            border: 1px solid black;
            border-collapse: collapse;
        }
        td{
            border: 1px solid black;
        }

    </style>
    
    <table style="border: 1px solid black">
        <tr>
            <td>value 1</td>
            <td> value 2</td>
            <td> value 3</td>
            <td>value 4</td>
        </tr>
        <tr>
            <td colspan="4"> Values ralted to 1, 2, 3, 4</td>
        </tr>
    </table>