表格：可滚动的 tbody，固定的 tfoot答案

【问题标题】：Table: Scrollable tbody, fixed tfoot表格：可滚动的 tbody，固定的 tfoot
【发布时间】：2013-12-06 08:03:43
【问题描述】：

我正在尝试在我的表格结构中创建一个 tfoot 元素，我希望它保持固定在底部，而 tbody 保持可滚动。我已经阅读了各种相关的问题和答案，并且大多数似乎都在使用嵌套表。

虽然有人可能会争辩说“凡事可行就是凡事你应该使用”，使用嵌套表感觉（可能只是我）是一种完全错误的方法，而且我对标记的了解很少。像这样的用例没有更多“理智”的解决方案吗？

【问题讨论】：

标签： html css html-table

【解决方案1】：

根据您的需要尝试这些代码之一。

如果您需要页脚始终位于底部的网页：

<body>
    <div style="padding-bottom:60px;">
        <!--main content here-->
    </div>
    <div style="position:fixed;width:100%;height:60px;left:0;bottom:0;">
        <!--footer content here-->
    </div>
</body>

如果您在某处需要自定义块：

<div style="position:relative;width:600px;height:400px">
    <div style="padding-bottom:60px;">
        <!--main content here-->
    </div>
    <div style="position:absolute;width:100%;height:60px;left:0;bottom:0;">
        <!--footer content here-->
    </div>
</div>

示例中的页脚高度为 60 像素 - 实际上它可以是任何值。使用 CSS 文件作为样式（我写了 inline 以便更好地解释）。

另外我不建议使用嵌套表格。是的，你可以使用大锤作为胡桃夹子，但它不会有效。

【讨论】：