I have created a table and am considering using the thead as page headers if the table spans multiple pages. However, I am encountering an issue where the content of the table overlaps with the table header on the second page.
Here is a snippet of my HTML code:
<div class="row page-break-before">
<div class="col-sm-6" style="padding-right:0; border-right:2px solid #000000">
</div>
<div class="col-sm-6" style="padding-left:0;">
</div>
<div class="col-sm-6" style="padding-right:0; border-right:2px solid #000000">
</div>
<div class="col-sm-6" style="padding-left:0;">
</div>
<div class="col-sm-12" style="border-top: 2px solid #000000;">
<table class="table table-condensed">
<thead>
<tr>
<th colspan="9">Header Row 1</th>
</tr>
<tr>
<th>Header col 1</th>
<th>Header col 2</th>
<th>Header col 3</th> ...
<th>Header col 9</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
The CSS for handling page breaks is as follows:
table {
page-break-inside: auto
}
thead {
display: table-header-group
}
tfoot {
display: table-row-group
}
tr {
page-break-inside: avoid
}
The print preview shows the overlapping issue, which you can view here.
I have tried removing the div columns above the table, but the issue persists. I also attempted different arrangements of divs with bootstrap col classes, but nothing seems to work. Is there a specific way the divs should be arranged to prevent the overlap of page headers with the table content?