Question

以下是我的HTML文件和CSS文件

.pageBreak {
  display: none;
}

@media print {
  #mainTable thead {
    display: table-header-group;
  }
  .accounts {
    page-break-after: always;
  }
}


/* For Chrome */

@media print and (-webkit-min-device-pixel-ratio:0) {
  .accounts {
    page-break-after: avoid;
  }
  .pageBreak {
    page-break-before: always;
    display: block;
  }
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="print2.css">
</head>

<body>
  <table id="mainTable">
    <thead>
      <tr>
        <th>Header</th>
      </tr>
    </thead>
    <tbody>
      <tr class="accounts">
        <td>abc
          <h1 class="pageBreak"></h1>
        </td>
      </tr>
      <tr class="accounts">
        <td>def
          <h1 class="pageBreak"></h1>
        </td>
      </tr>
      <tr class="accounts">
        <td>ghi
          <h1 class="pageBreak"></h1>
        </td>
      </tr>
      <tr class="accounts">
        <td>klm
          <h1 class="pageBreak"></h1>
        </td>
      </tr>
    </tbody>
  </table>
</body>

</html>

我无法在多个页面中拆分帐户。我终于在Chrome上工作，但现在它在每个“帐户”行之后创建了额外的页面。有什么方法可以隐藏额外的页面吗？此外，不确定这将如何处理大量数据。

CSS page-break-after在Chrome中不起作用

0 个答案: