THEAD is overlapping with page contents on Print page headers

Question

I design a table and planning to use the thead as page headers if multiple pages there with table. On top of the table there are some more DIV's with some additional info is also present and while printing on second page the table content is overlapped with the table header

My html is like below

        <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 page level CSS is like below

    table {
    page-break-inside: auto
}

thead {
    display: table-header-group
}

tfoot {
    display: table-row-group
}

tr {
    page-break-inside: avoid
}

The generated printpreview with overlapping is like

If i remove the 4 div columns above the table [ The ones with col-sms-6 class ] this issue seems to be resolved. I tried to keep the 4 divs inside a row , but still no luck . Tried to place and empty row before the start of table still no luck Is something wrong in the way DIV with bootstrap col classes are arranged which is causing the overlap of page headers with table content

https://stackoverflow.com/a/39276255/9981067, this worked for me, just use `overflow-x: visible !important;` for the div which table is wrapped in. — fatemeh fallahi arezoudar, Aug 17 '21 at 04:11

score 1 · Answer 1 · edited May 14 '21 at 23:06

1

Just ran into this myself. I found this worked for me, but the thead is only displayed on the first page:

@media print {
  thead {display: table-row-group;}
}

edited May 14 '21 at 23:06

Alexandre Aimbiré

1,494
2
14
26

answered May 14 '21 at 17:15

Jedi

11
2

THEAD is overlapping with page contents on Print page headers

1 Answers1