停止在每页打印 CSS 中显示表页脚

Question

我的 HTML 页面中有一个很长的表格。当我打印页面时，表页脚tfoot显示在每页底部。但我希望它只显示在最后一页

有些表我没有写任何tbody，因为我用datatable来填充数据。

当我添加以下代码时。然后显示tbody第一个tfoot并且tbody内容正在显示。

有没有CSS可以显示tfoot最后但打印时不在每页重复？

table.table tfoot {
    display: table-row-group;
}

表格 HTML：

<table style="width: 100%;" id="customer_payment_view" class="customer_payment_view table table-hover table-bordered">
        <thead>
            <tr>
                <th>Id</th>
                <th>Agency Name</th>
                <th>Customer Name</th>
                <th>Date</th>
                <th>Bill No</th>
                <th>Discount</th>
                <th style="display: none;">Adjustment</th>
                <th>Pay Amount</th>
                <th>Pay Method</th>
                <th>Paid Through</th>
                <th>Remarks</th>
                <th>Action</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th style="display: none;"></th>
                <th class="7">Pay Amount</th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
            </tr>
        </tfoot>
    </table>

结果如下：

Answer 1

您可以使用媒体查询来渲染 ，tfoot就好像它是tbody.

@media print {
    table.table tfoot {
        display: table-row-group;
    }
}

这样它只出现在表格的末尾。