CSS page-break-before不在表行上工作

Question

我有一个像这样的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;
            }
}

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

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

来源谢谢马吉德 ！

唷！

Answer 2

尝试以下：不需要@media打印

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

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

要么

与@media打印

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