Nested table issue while printing document - css

Question

I have a table which I am trying to print. So the basic structure is contains a nested table both containing thead. Once I do a print, the pdf shows overlapping thead.
Please find attached link to reproduce the code. https://www.dropbox.com/s/a0l0s7blh401tg7/table.html
<table>
<thead>
<tr>
<td>heading</td>
</tr>
<tbody>
<tr>
<td>
<table>
<thead>
<tr>
<th>Heading 2</th>
</tr>
</table>
</td>
</tr>
</tbody>
</thead>
</table>

Answer 1

Try the following css (this only helps if you have a very plain thead an only one aswell):
thead { display: table-header-group }
tfoot { display: table-row-group }
tr { page-break-inside: avoid }
Edit:
Regarding your question: The reason why your thead is overlapping is your table markup itself. Right now we have multiple table and thead, and also padding which is causing the overlapping. I did some research and found two different solutions you could use.
Fact 1: Only the lastest thead in your markup will be place on a second page when printed. Therefore you can check and adjust your table like this working example here, print button on the top :
<table>
<!-- thead on first page -->
<thead>
<tr>
<th> ... </th>
</tr>
</thead>
<tbody>
<tr>
<td>
<table>
<!-- thead on first page an all following -->
<thead>
<tr>
<th> ... </th>
</tr>
</thead>
<tbody>
<tr>
<td> ... </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Fact 2: In my opinion the only working solution if you want all your thead information on all pages is to move all th in one thead at the top of the table, therefore you will have all informations on every page working example for this solution, print button on the top
Hopefully this helps :)