打印 html 文档时所有页面中的 HTML 页眉和页脚

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

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

我查了一下，发现使用thead和tfoot的表格格式就可以做到。 它在 Firefox 和 IE 中工作，但在 Chrome 中不起作用。这是一些 webkit 浏览器兼容性问题吗？

有没有其他兼容所有浏览器的方法。

更新：截至 2021 年 4 月，该 bug 仍处于开放状态https://bugs.webkit.org/show_bug.cgi?id=17205。正如 SHAKU 所提到的https://stackoverflow.com/a/34884220/2776433

您可以使用“@print”CSS 媒体样式定义专门定位打印样式。这将允许您在打印文档时和打印预览中严格创建单独的样式。

我会以此作为坚实的基础。

    @media print {

    * {
        color: #000 !important;
        -webkit-text-shadow: none !important;
        text-shadow: none !important;
        font-family: "Times New Roman", Times, serif;
        background: transparent !important;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        border: none!important;
        font-weight: normal!Important;
    }

    header, nav, footer {
       overflow:visible;
    }

    .body {
        width: auto;
        border: 0;
        margin: 0 5%;
        padding: 0;
        float: none !important;
    }


    a, a:link, a:visited {

        &[href]:after {
            content: " (" attr(href) ") ";
            font-size: 90%;
        }

        &[href^="javascript:"],
        &[href^="#"] {
            &:after {
                content: "";
            }
        }
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}