Avoid page break happening between two specific rows - html

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:
Putting the two rows inside a <div> tag
Having Col4 span over both rows (Col4 content just moves to next page)
Putting both rows into a table (loses alignment with headings)

Answer 1

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 2

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 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>