如何让 DIV Table headers 和页脚在打印时 Div Table 被 page-break 打断时重复

Question

我正在尝试使用 DIV 替换普通的 html table。但是，当打印或呈现为 PDF 时 table 与 page-break 分开时，它的行为并不像我预期的那样。我假设它的行为就像一个正常的 table，table-header 在页面顶部重复，table-footer 在底部重复。

[Header行]

[Table 行]

---分页符---

[Header行]

[Table 行]

[页脚行]

.Table {
  display: table;
  width: 100%;
}

.TableRow {
  display: table-row;
}

.TableHeading {
  display: table-header-group;
  background-color: #ddd;
  font-weight: bold;
}

.TableCell,
.TableHead {
  display: table-cell;
  padding: 3px 10px;
  border: 1px solid #999999;
}

.TableFoot {
  display: table-footer-group;
  font-weight: bold;
  background-color: #ddd;
}

.TableBody {
  display: table-row-group;
}

<div class="Table">
  <div class="TableHeading">
    <div class="TableHead">
      Month
    </div>
    <div class="TableHead">
      Person
    </div>
    <div class="TableHead">
      Amount
    </div>
  </div>
  <div class="TableBody">
    <div class="TableRow">
      <div class="TableCell">
        January
      </div>
      <div class="TableCell">
        Bob
      </div>
      <div class="TableCell">
        €100
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        February
      </div>
      <div class="TableCell">
        Fred
      </div>
      <div class="TableCell">
        €130
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        March
      </div>
      <div class="TableCell">
        Larry
      </div>
      <div class="TableCell">
        €150
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        January
      </div>
      <div class="TableCell">
        Bob
      </div>
      <div class="TableCell">
        €100
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        February
      </div>
      <div class="TableCell">
        Fred
      </div>
      <div class="TableCell">
        €130
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        March
      </div>
      <div class="TableCell">
        Larry
      </div>
      <div class="TableCell">
        €150
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        January
      </div>
      <div class="TableCell">
        Bob
      </div>
      <div class="TableCell">
        €100
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        February
      </div>
      <div class="TableCell">
        Fred
      </div>
      <div class="TableCell">
        €130
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        March
      </div>
      <div class="TableCell">
        Larry
      </div>
      <div class="TableCell">
        €150
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        January
      </div>
      <div class="TableCell">
        Bob
      </div>
      <div class="TableCell">
        €100
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        February
      </div>
      <div class="TableCell">
        Fred
      </div>
      <div class="TableCell">
        €130
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        March
      </div>
      <div class="TableCell">
        Larry
      </div>
      <div class="TableCell">
        €150
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        January
      </div>
      <div class="TableCell">
        Bob
      </div>
      <div class="TableCell">
        €100
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        February
      </div>
      <div class="TableCell">
        Fred
      </div>
      <div class="TableCell">
        €130
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        March
      </div>
      <div class="TableCell">
        Larry
      </div>
      <div class="TableCell">
        €150
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        January
      </div>
      <div class="TableCell">
        Bob
      </div>
      <div class="TableCell">
        €100
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        February
      </div>
      <div class="TableCell">
        Fred
      </div>
      <div class="TableCell">
        €130
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        March
      </div>
      <div class="TableCell">
        Larry
      </div>
      <div class="TableCell">
        €150
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        January
      </div>
      <div class="TableCell">
        Bob
      </div>
      <div class="TableCell">
        €100
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        February
      </div>
      <div class="TableCell">
        Fred
      </div>
      <div class="TableCell">
        €130
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        March
      </div>
      <div class="TableCell">
        Larry
      </div>
      <div class="TableCell">
        €150
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        January
      </div>
      <div class="TableCell">
        Bob
      </div>
      <div class="TableCell">
        €100
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        February
      </div>
      <div class="TableCell">
        Fred
      </div>
      <div class="TableCell">
        €130
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        March
      </div>
      <div class="TableCell">
        Larry
      </div>
      <div class="TableCell">
        €150
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        January
      </div>
      <div class="TableCell">
        Bob
      </div>
      <div class="TableCell">
        €100
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        February
      </div>
      <div class="TableCell">
        Fred
      </div>
      <div class="TableCell">
        €130
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        March
      </div>
      <div class="TableCell">
        Larry
      </div>
      <div class="TableCell">
        €150
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        January
      </div>
      <div class="TableCell">
        Bob
      </div>
      <div class="TableCell">
        €100
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        February
      </div>
      <div class="TableCell">
        Fred
      </div>
      <div class="TableCell">
        €130
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        March
      </div>
      <div class="TableCell">
        Larry
      </div>
      <div class="TableCell">
        €150
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        January
      </div>
      <div class="TableCell">
        Bob
      </div>
      <div class="TableCell">
        €100
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        February
      </div>
      <div class="TableCell">
        Fred
      </div>
      <div class="TableCell">
        €130
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        March
      </div>
      <div class="TableCell">
        Larry
      </div>
      <div class="TableCell">
        €150
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        January
      </div>
      <div class="TableCell">
        Bob
      </div>
      <div class="TableCell">
        €100
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        February
      </div>
      <div class="TableCell">
        Fred
      </div>
      <div class="TableCell">
        €130
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        March
      </div>
      <div class="TableCell">
        Larry
      </div>
      <div class="TableCell">
        €150
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        March
      </div>
      <div class="TableCell">
        Larry
      </div>
      <div class="TableCell">
        €150
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        January
      </div>
      <div class="TableCell">
        Bob
      </div>
      <div class="TableCell">
        €100
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        February
      </div>
      <div class="TableCell">
        Fred
      </div>
      <div class="TableCell">
        €130
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        March
      </div>
      <div class="TableCell">
        Larry
      </div>
      <div class="TableCell">
        €150
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        January
      </div>
      <div class="TableCell">
        Bob
      </div>
      <div class="TableCell">
        €100
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        February
      </div>
      <div class="TableCell">
        Fred
      </div>
      <div class="TableCell">
        €130
      </div>
    </div>
    <div class="TableRow">
      <div class="TableCell">
        March
      </div>
      <div class="TableCell">
        Larry
      </div>
      <div class="TableCell">
        €150
      </div>
    </div>
  </div>
  <div class="TableFoot">
    <div class="TableHead">
      &nbsp;
    </div>
    <div class="TableHead">
      &nbsp;
    </div>
    <div class="TableHead">
      €1234
    </div>
  </div>
</div>

Answer 1

复制了您的代码片段，我发现它在 Firefox 和 Edge 上按预期工作（重复，即），但在 Chrome 和 Opera 上没有。所以我认为这是某种特定的浏览器错误，经过一番搜索我发现了这个：

闯入：避免；

将此 CSS 添加到 .TableHeading 和 .TableFoot - 对其进行了测试并有效。但它在某种程度上打破了页脚的垂直对齐方式

已找到解决方案 here，包含历史记录和解释。

希望对您有所帮助

如何让 DIV Table headers 和页脚在打印时 Div Table 被 page-break 打断时重复

How to get DIV Table headers and footers to repeat when the Div Table is broken by a page-break when printing

html

css

html-table

css-tables