html - 打印 html 页面时添加页眉/页脚

Question

我创建了一个带有页眉、一些内容和页脚的 html 页面。我试图打印 HTML 页面，结果有 2 页。我在第一页有页眉，在最后一页有页脚。

我真正需要的是在所有页面中显示页眉和页脚，就像在 word 文档中一样。

Answer 1

您需要将所有内容包装在一个表格中，例如:

HTML

<table>
    <thead>
        <tr><td>
            <!-- your header goes here -->
        </td></tr>
    </thead>
    <tbody>
        <tr><td>
            <!-- your content goes here -->
        </td></tr>
    </tbody>
    <tfoot>
        <tr><td>
            <!-- your footer goes here -->
        </td></tr>
    </tfoot>
</table>

...并添加以下 CSS:

@media print {
    thead { display: table-header-group; }
    tfoot { display: table-footer-group; }
}
@media screen {
    thead { display: block; }
    tfoot { display: block; }
}

我需要补充一点，这可能不适用于基于 webkit 的浏览器(截至目前)，如 Safari、Chrome 和 Opera。请在您想要支持的所有浏览器上进行测试。
Chrome 可能支持另一种选择:将页眉和页脚设置为 position:fixed，但我无法避免与页面内容重叠(即超过一页的超长文本)在我的快速测试中。

---

附录
您可能希望在分页时不中断内容元素 - 例如列出跨越多行文本的元素。为避免这种情况，您可以设置以下 CSS:

-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
          page-break-inside: avoid; /* Firefox */
               break-inside: avoid; /* IE 10+ */