2

我有一些动态内容，打印时我发现浏览器会在表格<thead>和下面的表格之间插入分页符<tbody>，根据前面的动态内容产生类似这个屏幕截图的内容。

在这种情况下，我希望它将表格/标题移动到下一页，所以我自己没有标题。

break-after: avoid看起来这应该是 CSS 规则，我尝试了thead、 包含tr和 的组合th，但它似乎没有任何效果。

主要在 Chrome 上尝试，我在 Firefox 中得到了类似的结果，如果可能的话，我希望它能够在所有主要浏览器中工作。

在许多情况下，表格可以很好地适合当前页面，所以我不想在新页面上开始每个表格。它们也可能比一整页长，并且需要能够在行之间的某处中断。

Chrome 打印到 PDF

      table {
        border-collapse: collapse;
      }
      thead {
        break-after: avoid; /* No effect */
      }
      thead tr {
        break-after: avoid; /* No effect */
      }
      thead tr th {
        break-after: avoid; /* No effect */
      }
      td, th {
        border: 1px solid #A0A0A0;
        padding: 0.2em 0.5em;
      }
      td {
        vertical-align: top;
      }
      td p:first-child { margin-top: 0; }
      td p:last-child { margin-bottom: 0; }
<div style="border: 2px solid red; width: 200px; height: 240mm">
  <p>Consume Space</p>
  <p>Required height for effect is browser dependent</p>
  <button onclick="window.print()">Print</button>
 </div>
<table>
  <thead><tr><th><div>Name</div></th><th>Col 2</th><th>Col 3</th><th>Col 4</th></tr></thead>
  <tbody>
    <tr><td>A</td><td>X</td><td>Y</td><td><p>Z</p><p>Z</p><p>Z</p><p>Z</p></td></tr>
    <tr><td>B</td><td>X</td><td>Y</td><td><p>Z</p><p>Z</p><p>Z</p><p>Z</p></td></tr>
    <tr><td>C</td><td>X</td><td>Y</td><td><p>Z</p><p>Z</p><p>Z</p><p>Z</p></td></tr>
    <tr><td>D</td><td>X</td><td>Y</td><td><p>Z</p><p>Z</p><p>Z</p><p>Z</p></td></tr>
  </tbody>
</table>

4

1 回答 1

1

如您所见，媒体打印解决了您的问题

table {
        border-collapse: collapse;
      }
      thead {
        break-after: avoid; /* No effect */
      }
      thead tr {
        break-after: avoid; /* No effect */
      }
      thead tr th {
        break-after: avoid; /* No effect */
      }
      td, th {
        border: 1px solid #A0A0A0;
        padding: 0.2em 0.5em;
      }
      td {
        vertical-align: top;
      }
      td p:first-child { margin-top: 0; }
      td p:last-child { margin-bottom: 0; }
@media print {
  table {page-break-inside: avoid;}
}
<div style="border: 2px solid red; width: 200px; height: 240mm">
  <p>Consume Space</p>
  <p>Required height for effect is browser dependent</p>
  <button onclick="window.print()">Print</button>
 </div>
<table>
  <thead><tr><th><div>Name</div></th><th>Col 2</th><th>Col 3</th><th>Col 4</th></tr></thead>
  <tbody>
    <tr><td>A</td><td>X</td><td>Y</td><td><p>Z</p><p>Z</p><p>Z</p><p>Z</p></td></tr>
    <tr><td>B</td><td>X</td><td>Y</td><td><p>Z</p><p>Z</p><p>Z</p><p>Z</p></td></tr>
    <tr><td>C</td><td>X</td><td>Y</td><td><p>Z</p><p>Z</p><p>Z</p><p>Z</p></td></tr>
    <tr><td>D</td><td>X</td><td>Y</td><td><p>Z</p><p>Z</p><p>Z</p><p>Z</p></td></tr>
  </tbody>
</table>

您可以使用它来获得所需的结果。

于 2020-07-09T11:42:47.043 回答