Table 印刷媒体 css 在偏移位置中断

Question

我有一个网页，顶部有一些元素和很长的 table 数据行，我正在尝试修复 css 以便它可以显示页面适当休息。

这比仅使用 page-break-* 规则更复杂，因为某些东西正在抵消 table 获得分页符的位置。

下面的屏幕截图来自我的打印预览 window。大红色边框是我添加到 tbody 的打印 css 规则，以便我可以看到它的开始和结束位置。请注意，在预览的第 2 页上，table 显示 Fredrick 和 Gerardo 行之间的分页符。所以，它打破了行之间的 table，正如它应该的那样，只是它在错误的行之间打破了它们......页面边缘，它从错误的地方开始。

我的意思是：我在 table 上方有一些元素（报告的标题、一些显示某些过滤值的框和一些记录数）。如果我在尝试打印之前使用 Chrome 检查器从页面中删除这些元素，那么 Chrome 正在计算的 row-level 分页符与页面完美匹配并且所有内容都可以正确打印。

因此，Chrome 似乎正在计算适合整个页面的 table 行的最高行，但在计算期间忽略了 table 上方的元素。但是在实际打印时，那些 above-elements 仍然包含在内，因此它不会破坏正确行的 table。

这有意义吗？

我该如何解决这个问题？

@media print {
    table { page-break-after:auto }
    tr    { page-break-inside:avoid; page-break-after:auto }
    td    { page-break-inside:avoid; page-break-after:auto }
    thead { display:table-header-group }
    tfoot { display:table-footer-group }

    table.listing tbody {
        border: 15px solid red;
    }

    table.listing tbody.display td {
        color: red;
    }
}

Answer 1

我认为你已经相对定位 table 并且它已经向下移动了等于菜单栏高度的高度。例如，将下面的代码放在单独的 html 文件中并尝试打印它。你会看到类似的效果。

<!DOCTYPE html>

<head>

  <style>
    :root {
      --menu-height: 200px;
    }

    @media print {
     table { page-break-after:auto }
     tr    { page-break-inside:avoid; page-break-after:auto }
     td    { page-break-inside:avoid; page-break-after:auto }
     thead { display:table-header-group }
     tfoot { display:table-footer-group }

     table.listing tbody {
        border: 15px solid red;
     }

     table.listing tbody.display td {
        color: red;
     }
   }

    td,
    th {
      border: 1px solid gray;
      height: 2cm;
    }

    table {
      position: relative;      /* <-- position shifted table */
      top: var(--menu-height); /* <-- shifted down by menu height */

      border-collapse: collapse;
      border: 10px solid red
    }

    .menu-bar {
      position: absolute;      /* <-- floating menubar */
      top: 0px;
      width: 300px;
      height: var(--menu-height);
      background-color: bisque;

    }
  </style>
</head>

<body>
  <div class="menu-bar">
    <h5>Herd Report</h5>
    <p>mountain goat</p>
  </div>


  <table>
    <tr>
      <th>asd</th>
      <th>bbbb</th>
      <th>bcccc</th>
      <th>dddd</th>
      <th>eee</th>
      <th>ff ff</th>
      <th>ggg </th>
      <th>hhh h</th>
    </tr>
    <tr><td>1</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td>2</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td>3</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td>4</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td>5</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td>6</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td>7</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td>8</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td>9</td><td></td><td></td><td></td><td></td><td></td><td></td><td>c</td></tr>
    <tr><td>0</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td>11</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td>12</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td>13</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td>14</td><td>5</td><td></td><td></td><td></td><td></td><td></td><td></td>
    </tr>
  </table>
</body>

</html>

在上面的例子中，table 是相对定位的。这就是 CSS 标准所说的 position:relative:

relative
The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements; thus, the space given for the element in the page layout is the same as if position were static.

更多信息请参考：https://developer.mozilla.org/en-US/docs/Web/CSS/position

如果您使用文档中的演示，您会注意到相对位置在页面上保留位置，space 但元素相对于该位置移动。因此，在打印 table 时，浏览器会考虑元素的静态位置，在我们的例子中是左上角，并相应地拆分行。但是由于相对定位 table 被向下移动并在不需要的地方中断。
要修复定位，您需要在样式 sheet.

末尾添加以下 CSS 规则

    @media print {
     .menu-bar{
       position: static;
     }
     table{
       position: static;
     }
   }

我们在这里说的是，如果媒体是打印的，那么定位菜单栏和table静态。
您的项目中可能有很多复杂的样式，但您可能需要为整个样式设置样式印刷媒体单独记录。

Table 印刷媒体 css 在偏移位置中断

Table with print media css is breaking at an offset position

css

html-table

print-css