html - 如果表格单元格的内容太大，如何用一个 tr 在表格上设置分页符？

Question

我的 div 容器中有 4 个不同的表。我无法在页面上调整最后一张表格。在我的最后一张表中，只有一个表格单元格。此 td 单元格的高度设置为 200px。我想知道我是否可以在最后一张 table 上设置 page-break。这是我的表格示例:

<table class="srTable">
    <thead>
        <tr>
            <th>Summary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td id="summary"></td>
        </tr>
    </tbody>
</table>

这是我的 CSS:

    table.srTable {
    margin-top: 5px;
    margin-bottom: 5px;
    width: 100%;
    border: 1px solid black;
    border-collapse: collapse;
}
table.srTable th {
    text-align: center;
    border: 1px solid black;
    background-color: #E0DBDD;
}
table.srTable td {
    height: 180px;
    text-align: left;
    vertical-align: top;
}

@media print {
    table.srTable { page-break-after:auto }
    table.srTable tr { page-break-inside:avoid; page-break-after:auto }
    table.srTable td { page-break-inside:avoid; page-break-after:auto }
}

如果页面放不下 srTable 中的内容，我希望在下一页看到完整的表格。上面的代码不起作用，表格停留在第一页上，我看不到我的 td 单元格的底部边框。

Answer 1

您可以使用更简单的解决方案。您只需设置 page-break-inside: avoid;在 table.srTable 上. <tr> 的其他规则或 <td>不需要:

table.srTable {
  margin: 5px 0;
  width: 100%;
  border: 1px solid black;
  border-collapse: collapse;
}
table.srTable th {
  text-align: center;
  border: 1px solid black;
  background-color: #E0DBDD;
}
table.srTable td {
  height: 180px;
  text-align: left;
  vertical-align: top;
}
div {
 height:98vh;
}
@media print {
  table.srTable {
    page-break-inside: avoid;
  }
}

<div></div>
<table class="srTable">
  <thead>
    <tr>
      <th>Summary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td id="summary"></td>
    </tr>
  </tbody>
</table>