如何让表格tfooter固定在每一页页面底部？

原生HTML的<tfoot>配合display: table-footer-group在主流浏览器的打印渲染逻辑里，只会将页脚放在表格内容的末尾，不会自动固定到页面底部——这是浏览器对表格打印布局的原生限制，并非代码写法问题。

以下是两种可行的变通方案：

方案一：CSS打印定位模拟表格内页脚 #

通过在表格外创建与原tfoot结构一致的元素，仅在打印时固定到页面底部，同时隐藏表格内的tfoot，既保证列对齐，又实现页脚固定效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Table Footer Print Fix</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #000;
            padding: 8px;
        }
        thead {
            display: table-header-group;
        }

        /* 打印专属样式 */
        @media print {
            /* 隐藏原表格内的tfoot */
            table tfoot {
                display: none;
            }
            /* 模拟页脚，固定在页面底部 */
            .print-footer {
                position: fixed;
                bottom: 0;
                width: 100%;
            }
            .print-footer table {
                margin: 0;
            }
            /* 避免表格内容被页脚遮挡，预留空间 */
            table tbody {
                margin-bottom: 40px; /* 与页脚高度匹配 */
            }
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>HEADER</th>
            </tr>
        </thead>
        <tbody>
            <!-- 你的数据行，此处省略重复内容 -->
            <tr><td>DATA</td></tr>
            <tr><td>DATA</td></tr>
            <!-- 更多数据行 -->
        </tbody>
        <tfoot>
            <tr>
                <td>FOOTER</td>
            </tr>
        </tfoot>
    </table>

    <!-- 打印时显示的模拟页脚 -->
    <div class="print-footer">
        <table>
            <tr>
                <td>FOOTER</td>
            </tr>
        </table>
    </div>
</body>
</html>

方案二：强制分页配合页脚显示 #

如果必须保留表格内的tfoot结构，可通过强制分页让tfoot出现在每页末尾，但需要预估每页容纳的行数，灵活性较差：

@media print {
    /* 每20行后强制分页，根据实际情况调整行数 */
    table tbody tr:nth-child(20n) {
        page-break-after: always;
    }
    /* 避免页脚被拆分到下一页 */
    tfoot {
        display: table-footer-group;
        page-break-before: avoid;
    }
}

核心限制说明 #

浏览器的表格打印逻辑中，<tfoot>属于表格流的一部分，只会紧跟<tbody>内容，无法脱离表格固定到页面底部。目前没有纯CSS方法能直接实现表格内tfoot固定在打印页面底部的效果，必须通过上述变通方案达成需求。

内容的提问来源于stack exchange，提问作者Marcus