CSS page-break-before 不处理表格行答案

【问题标题】：CSS page-break-before not working on table rowCSS page-break-before 不处理表格行
【发布时间】：2018-12-19 06:52:56
【问题描述】：

我有一个这样的 HTML 表格：

<table>
        <tr>
            <td>aaa</td>
            <td>aaa</td>
            <td>aaa</td>
            <td>aaa</td>
            <td>aaa</td>
        </tr>
        <tr>
            <td>aaa</td>
            <td>aaa</td>
            <td>aaa</td>
            <td>aaa</td>
            <td>aaa</td>
        </tr>
        <tr class="page-break">
            <td>aaa</td>
            <td>aaa</td>
            <td>aaa</td>
            <td>aaa</td>
            <td>aaa</td>
        </tr>
        <tr>
            <td>aaa</td>
            <td>aaa</td>
            <td>aaa</td>
            <td>aaa</td>
            <td>aaa</td>
        </tr>
        <tr>
            <td>aaa</td>
            <td>aaa</td>
            <td>aaa</td>
            <td>aaa</td>
            <td>aaa</td>
        </tr>
        <tr>
            <td>aaa</td>
            <td>aaa</td>
            <td>aaa</td>
            <td>aaa</td>
            <td>aaa</td>
        </tr>
    </table>

我要做的是在打印时在第三行之前应用分页符。

我已应用以下 CSS：

@media print {
            tr.page-break {
                page-break-before: always;
            }
}

什么都没做，然后我将 display: block 应用到这个 CSS 代码中，如下所示：

@media print {
            tr.page-break {
                page-break-before: always;
                display: block;
            }
}

它不会分页，打印时也会弄乱我的桌子，我做错了什么？

【问题讨论】：

page-break-before => 您不能在空的
或绝对定位的元素上使用此属性。
@user979331 - 我在答案中的编辑是这个问题最受认可的解决方案，这显然是许多人遇到的已知问题，目前还没有更好的解决方案。你能接受答案吗？节日快乐..

标签： html css media-queries

【解决方案1】：

如果您使用的是打印媒体查询，最好在打印媒体查询中指定的样式中添加!important（这是少数提倡添加!important的情况之一！）

试试：

@media print {
        tr.page-break {
            page-break-before:always!important;
        }
 }

看看你的进展如何......希望这会有所帮助

编辑：

调整您的 CSS 以包含以下内容：

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

Source谢谢Majid！

呼！

【讨论】：

@user979331 同样，确保类在主 CSS 中定义。你可以有 .pbrk{} （空类），或者你可以只添加一个小的边距顶部（ 1px 或 2px 或其他东西）。我会选择后者
我找到了这个答案stackoverflow.com/questions/45046834/…，它给出了一个全面的解释。（基本上它说表格行中必须有 2 个 div，即使一个是空的，并在第二个上放置一个 page-break-before）它链接到的另一个问题有另一个 97 票的答案！你可以试试..很好奇这是个大问题..
这有点用，它会分页，但它会创建一个非常长的带有边框的表格单元格，它将显示前两行，进行分页，然后在第二页上有一个很长的带有边框的单元格（只有一个单元格），然后执行下一行。
@user979331 如果它只显示 2 行，我说放 page-break-after？（而不是 page-break-before？）如果您的表格有边框，这会使其看起来很长，具体取决于表格行的高度..

【解决方案2】：

试试下面：不需要@media print

 table tr.page-break{
    page-break-inside: avoid;
    page-break-before: always;
 }

您可能需要指定列的宽度。

或

@media 打印

 @media print {
    .page-break  { page-break-before: always; }
 }

【讨论】：

我已经在 Chrome 和 Safari 中尝试过，但它不起作用