htmlheaderpage-breaktableheader

Mutli-row table header wrong page break

I have a table with 5 rows in header and I want this header to be repeated on every page, even after the table body page-break. The problem is that only the two last rows of the header are being repeated to the next page (as shown below) enter image description here

The first three rows do not have <th> tags, just the content. The two last rows have <th> tags. If I add the content of the first three rows inside <th> tags then the whole header is not appearing after page break.

Here is my code:

td,
th {
  border: solid black 1px!important;
  font-size: 9px;
}

table {
  page-break-after: always;
  border: solid black 1px!important;
}

table:last-of-type {
  page-break-after: auto;
}

.none-header {
  background-color: lightgray;
  border: solid black 1px!important;
}

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

tr {
  page-break-inside: avoid;
  page-break-after: auto;
}

tbody {
  display: table-row-group;
}

tfoot {
  display: table-footer-group;
}

@page {
  size: a4!important;
}

@media print {
  @page {
    size: landscape;
  }
  body {
    margin-top: 20mm!important;
    margin-bottom: 20mm!important;
    margin-left: 20mm!important;
    margin-right: 0mm!important;
  }
  @media print {
    thead {
      display: table-header-group;
    }
  }
}
<table class="table text-center">
  <thead>
    <tr>
      <h6 class="text-center">ΑΣΕΠ ΦΟΔΣΑ ΣΟΧ 1/2019</h6>
    </tr>
    <tr>
      <h6 class="text-left">
        ΕΛΛΗΝΙΚΗ ΔΗΜΟΚΡΑΤΙΑ<br> ΠΕΡΙΦΕΡΕΙΑΚΟΣ ΣΥΝΔΕΣΜΟΣ<br> ΦΟΡΕΩΝ ΔΙΑΧΕΙΡΙΣΗΣ ΣΤΕΡΕΩΝ<br> ΑΠΟΒΛΗΤΩΝ (ΦΟΔΣΑ)<br> ΚΕΝΤΡΙΚΗΣ ΜΑΚΕΔΟΝΙΑΣ
      </h6>
    </tr>
    <tr>
      <h5 class="text-center">ΠΙΝΑΚΑΣ ΜΟΡΙΟΔΟΤΗΣΗΣ ΓΕΝΙΚΟΣ</h5>
    </tr>
    <tr class="none-header">
      <th colspan="31">
        <h6>'.$speRow['descr'].'</h6>
      </th>
    </tr>
    <tr>
      <th>Α/Α</th>
      <th>ΟΝΟΜΑΤ/ΜΟ</th>
      <th>Α.Δ.Τ.</th>
      <th colspan="2">ΑΝΕΡΓΙΑ</th>
      <th colspan="2">ΠΟΛΥΤΕΚΝ.</th>
      <th colspan="2">ΤΕΚΝ. ΠΟΛΥΤΕΚΝ.</th>
      <th colspan="2">ΤΡΙΤΕΚΝ.</th>
      <th colspan="2">ΤΕΚΝ. ΤΡΙΤΕΚΝ.</th>
      <th colspan="2">ΑΝΗΛΙΚΑ</th>
      <th colspan="2">ΜΟΝΟΓΟΝ.</th>
      <th colspan="2">ΤΕΚΝ. ΜΟΝΟΓΟΝ.</th>
      <th colspan="2">ΑΝΑΠΗΡΙΑ</th>
      <th colspan="2">ΑΝΑΠΗΡ. ΣΥΓΓΕΝΗ</th>
      <th colspan="2">ΒΑΘΜΟΣ</th>
      <th colspan="2">ΕΜΠΕΙΡΙΑ</th>
      <th>ΕΝΤ<br />ΟΠ/ΤΑ</th>
      <th>ΠΙΝΑ<br />ΚΑΣ</th>
      <th>ΜΟΡΙΑ</th>
      <th>ΑΡΧ/ΣΗ</th>
    </tr>
  </thead>
  <tbody class="report-content">
    ...body content
  </tbody>
</table>

Is there any way to fix this and make the whole header to repeat after page break?

Thanks in advance.

Solution

  • It's ok. I created a function that manually adds rows to the table while the table's height is less than the page's height. When the table's height goes beyond page's height, I remove the last inserted row, create a new table with the same header and add the remaining rows to this table.