Table header overlapping

[gilles...@gmail.com]

Hello,

I am designing a report with jsrender and phantompdf. I have a table with dynamic columns (with loop for) and the tbody of the table overlap the thead of the table.

Here is an example :

https://playground.jsreport.net/#playground/WJ3FVIUcCe/2

I tried to fix it by :

   thead {display: table-header-group;}
   tfoot {display: table-row-group;}
   tr {page-break-inside: avoid;}

but it doesn't do the job. Do you have any idea to solve the problem ?

Thanks for your help.

Gilles

[Jan Blaha]

The problem seems to be the padding in the .col-titre

.col-titre {
    background: #005498;
    font-family: Arial;
    /*padding: 10px;*/
    text-align: center;
}

The header is not overlapping without it. This is probably not the solution, but at least a hint.

https://playground.jsreport.net/#playground/WJ3FVIUcCe/3