Mutli-row table header 分页错误

Question

我有一个 table，在 header 中有 5 行，我希望这个 header 在每一页上重复，即使在 table body page-break。问题是只有 header 的最后两行被重复到下一页（如下所示）

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

这是我的代码：

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>

有什么方法可以解决这个问题并使整个 header 在分页后重复？

提前致谢。

Answer 1

没关系。我创建了一个函数，可以在 table 的高度小于页面高度时手动向 table 添加行。当 table 的高度超出页面高度时，我删除最后插入的行，使用相同的 header 创建一个新的 table 并将剩余的行添加到此 table .

Mutli-row table header 分页错误

Mutli-row table header wrong page break

html

header

page-break

tableheader