1

我有一个顶部有几个元素的网页和一个长的数据行表，我正在尝试修复 css，以便它可以适当地进行分页。

这比仅仅使用page-break-*规则更复杂，因为有些东西会抵消表格获得分页符的位置。

下面的截图来自我的打印预览窗口。大红色边框是我添加到的打印 css 规则，tbody以便我可以看到它的开始和结束位置。请注意，在预览的第 2 页上，表格在Fredrick和Gerardo行之间显示了分页符。因此，它应该在行之间破坏表格，只是它在错误的行之间破坏它们......或者它真正的样子是当它计数时看到它何时到达页面的边缘，它是从错误的地方开始的。

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

因此，Chrome 似乎正在计算适合整个页面的表格行的高度，但在计算过程中忽略了表格上方的元素。但是在实际打印时，仍然包含上述元素，因此它不会破坏正确行的表格。

那有意义吗？

我该如何解决？

@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;
    }
}

横向打印显示以奇怪的偏移量断裂

纵向打印显示奇怪的偏移量在中间切了一行

4

1 回答 1

2

我认为你有相对定位的桌子，它已经向下移动了等于菜单栏高度的高度。例如，将下面的代码放在单独的 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>

在此处输入图像描述

在上面的示例中，表格是相对定位的。这就是 CSS 标准所说的position:relative：

relative
元素按照文档的正常流程进行定位，然后根据top、right、bottom、left的值相对于自身进行偏移。偏移量不影响任何其他元素的位置；因此，页面布局中为元素指定的空间与位置是静态的相同。

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

如果您使用文档中的演示，您会注意到 position relative 保留页面上的位置和空间，但元素相对于该位置移动。因此，在打印表格时，浏览器会考虑元素的静态位置，在我们的例子中位于左上角，并相应地拆分行。但由于相对定位，工作台向下移动并在不需要的位置断裂。
要修复定位，您需要在样式表的末尾添加以下 CSS 规则。

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

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

于 2021-11-17T14:31:07.977 回答