Mutli-row table header wrong page break

Question

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)

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.

Answer 1

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.