非重复 Table 避免分页的页脚 CSS

Question

所以我遇到了一个奇怪的情况，我有一个 table 页脚，我只需要重复一次，所以我决定将 "footer" trs 添加到页脚的末尾tbody 所以它只会在 table 的末尾出现一次并且看起来像一个页脚，没有在每个打印页面上重复。

<table>
    <tbody>
        @foreach(var item in Model.Items)
        {
            <tr><td>@item.Name</td></tr>
            <tr><td>@item.Total</td></tr>
        }
        <tr>
            <td>Total</td>
            <td>@Model.Items.Sum(x  => x.Total)</td>
        </tr>
        <tr>
            <td>Discount</td>
            <td>@(Model.Items.Sum(x => x.Total) / 50)</td>
        </tr>
    </tbody>
</table>

这很好，直到 Model.Items 有足够的行，当我需要将两个页脚行放在一起时，它将页脚的第二行推到下一页。

我也试过使用实际的 tfoot 标签，就像 page-break-inside:avoid 风格一样。

<table>
    <tbody>
        @foreach (var item in Model.Items)
        {
            <tr><td>@item.Name</td></tr>
            <tr><td>@item.Total</td></tr>
        }
    </tbody>
    <tfoot style="page-break-inside:avoid;">
        <tr>
            <td>Total</td>
            <td>@Model.Items.Sum(x => x.Total)</td>
        </tr>
        <tr>
            <td>Discount</td>
            <td>@(Model.Items.Sum(x => x.Total) / 50)</td>
        </tr>
    </tfoot>
</table>

这使页脚保持在一起，但它现在在每一页上重复而不是一次。有人在另一个 Stack Overflow 问题上建议在 tfoot 上使用以下样式来阻止它重复，但现在它忽略了 page-break-inside:avoid 样式。

<tfoot style="display: table-row-group"></tfoot>

有谁知道如何让页脚出现一次并避免分页打印多页？

Answer 1

我让它工作了，但我必须应用一些样式才能使它看起来像一个 table。我将原始页脚 HTML 放入 tr > td > table 中，如下所示：

<table>
    <tbody>
        @foreach (var item in Model.Items)
        {
            <tr><td>@item.Name</td></tr>
            <tr><td>@item.Total</td></tr>
        }

        <tr style="page-break-inside:avoid;">
            <td colspan="2">
                <table>
                    <tr>
                        <td>Total</td>
                        <td>@Model.Items.Sum(x => x.Total)</td>
                    </tr>
                    <tr>
                        <td>Discount</td>
                        <td>@(Model.Items.Sum(x => x.Total) / 50)</td>
                    </tr>
                </table>
            </td>
        </tr>
    </tbody>
</table>

这允许页脚保持在一起，同时只在页面末尾出现一次。

非重复 Table 避免分页的页脚 CSS

Non Repeating Table Footer That Avoids Breaking Over Printed Pages CSS

html

css

printing

printing-web-page