具有固定位置的 CSS 表格页脚

Posted 2023-03-04

【中文标题】具有固定位置的 CSS 表格页脚

【英文标题】：CSS Table footer with fixed position

【发布时间】：2011-07-20 08:58:52

【问题描述】：

我已经建立了一个简单的网页，所以你可以看到a live example

非常简单的表格，定义了 thead、tfoot 和 tbody。带样式定义：

<style type="text/css" media="print">
thead display: table-header-group; 
tfoot display: table-footer-group; 
</style>

我将页眉和页脚设置为在打印时显示在每一页中。但是在最后一页，页脚被放置在表格的末尾，而不是页面的底部（在打印预览中查看）。

我尝试了很多方法：固定位置放置，尝试为tbody设置固定大小，但都没有奏效。

我需要一个至少可以在 IE 和 Firefox 中运行的解决方案（当然，如果它可以跨浏览器运行那就太好了）

【问题讨论】：

谢谢凯尔。我将文件移动到另一个域，希望它现在可以工作

【参考方案1】：

如果您需要将页脚放在固定位置，您可以将其从表格中移出并放置在页面上的固定位置（尽管根据纸张尺寸，它可能无法正确打印！），但最重要的因素是这里是你需要有一个固定的内容高度。

了解内容会将页脚推到底部，这就是为什么您的页脚不在内容底部而是位于内容底部的原因。

顺便说一句，我无法查看您失败的示例...

【讨论】：

谢谢杰克。我正在修复链接，将文件移动到另一个主机，希望它现在可以工作。另外 - 在 self div 元素中分离页脚的想法 - 我尝试过，但问题是 - 你注意到 - 不能为内容设置恒定的高度。表是从数据库动态生成的，我不知道它会持续多久

我也有同样的问题，制作一个固定位置的 div 不是解决方案，对于从第二页开始的表格...在这种情况下，表格页脚应该从第二页向前打印