多行表头错误分页符答案

【问题标题】：Mutli-row table header wrong page break多行表头错误分页符
【发布时间】：2019-05-09 16:57:04
【问题描述】：

我有一个表头有 5 行的表，我希望在每一页上都重复这个表头，即使在表正文分页符之后也是如此。问题是只有表头的最后两行被重复到下一页（如下图）

前三行没有<th> 标签，只有内容。最后两行有<th> 标签。如果我在<th> 标签内添加前三行的内容，则分页符后不会出现整个标题。

这是我的代码：

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>

有什么办法可以解决这个问题，让整个页眉在分页后重复吗？

提前致谢。

【问题讨论】：

标签： html header page-break tableheader

【解决方案1】：

没关系。我创建了一个函数，可以在表格高度小于页面高度时手动将行添加到表格中。当表格的高度超过页面的高度时，我删除最后插入的行，创建一个具有相同标题的新表格并将剩余的行添加到该表格中。

【讨论】：