如何将tfooter粘在底部页面？

问题描述 投票：0回答：0

我有一个带有页眉和页脚的表格，但我无法将页脚放在每个页面的底部页面，如下图所示。如果表外的页脚没问题，但里面有问题

enter image description here

我的示例代码是：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        thead {
            display: table-header-group;
        }

        tbody {
            display: table-row-group;
        }

        tfoot {
            display: table-footer-group;
        }
    </style>
</head>
<body>

    <table>
        <thead>
            <tr>
                <th>
                    HEADER
                    <br />
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
            <tr>
                <td>
                    DATA
                </td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>
                    FOOTER
                </td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

我已经尝试了在互联网上找到的所有可能的解决方案，但我不知道如何在桌子内完成

html css html-table footer
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.