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：块应用到此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 }
 }

Source谢谢Majid！

Ph！

Answer 2

尝试以下方法：无需@media打印

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

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

OR

使用@media打印

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

CSS page-break-before不适用于表格行

2 个答案: