3

我正在尝试用 HTML + CSS 制作报告。我的模板包含页眉、内容和页脚。我想在所有页面中重复页眉和页脚，作为基础报告。

我的 CSS 看起来像这样：

标题：

@media print {
 div.report-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    padding-bottom: 15px;
    border-bottom: 2px solid #000034;
  }
}

页脚：

@media print {
  div.report-header {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    padding-bottom: 15px;
    border-bottom: 2px solid #000034;
  }
 }

可能的错误是，在 Firefox 上，报告工作正常，在所有页面中重复页眉和页脚，但在 Chrome 中，页眉仅出现在第一页，页脚仅出现在最后一页。

我尝试了很多教程，包括使用表格：

@media print {
  thead { display: table-header-group; width: 100%; background: red;}
  tfoot { display: table-footer-group; width: 100%; background: green;}
}

但结果是一样的，Firefox 工作正常，而 Chrome 不工作。请问，我能做些什么来做这个简单的报告？有没有插件可以做这样的事情？

我正在使用 Chrome 版本 24.0.1312.70。

4

1 回答 1

0

如果我没记错的话，这只适用于 Firefox、Opera 和 IE。

于 2013-02-19T11:34:33.290 回答