打印时防止在thead和tbody之间分页

Question

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

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

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

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

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

      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>

Answer 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>

您可以使用它来获得想要的结果。