打印时使用 css 在每页上重复标题

Posted

技术标签:

【中文标题】打印时使用 css 在每页上重复标题【英文标题】:Repeat header on each page using css while printing 【发布时间】:2016-12-29 00:05:19 【问题描述】:

我有一个项目需要打印一个多行的 html 表格。我想在每一页的顶部显示thead 部分。我用的是IE11浏览器。

<style>
    @media print 
        #Header 
            display: table-header-group;
        

        table 
            page-break-inside: auto;
        

        tr 
            page-break-inside: auto;
            position: static;
        
    
</style>


<div class="tab-pane active " id="template">
    <table>
        <thead>
            <div id="Header">
                <table style="width: 100%; table-layout: fixed;" id="tbl_1" class="table table-bordered">
                    <tbody>
                        <tr id="1">
                            <td style="height: 18px; border:solid; " ></td>
                            <td style="height: 18px; border:solid; "></td>
                            <td style="height: 18px; border:solid; "></td>
                            <td style="height: 18px; border:solid; "></td>
                        </tr>
                        <tr id="2">
                            <td style="height: 18px; border:solid; "></td>
                            <td style="height: 18px; border:solid; "></td>
                            <td style="height: 18px; border:solid; "></td>
                            <td style="height: 18px; border:solid; "></td>
                        </tr>

                    </tbody>
                </table>
            </div>
        </thead>
        <tbody>
            <div id="contents">
                <!--more then 800 rows in table-->
            </div>
        </tbody>
    </table>
</div>

【问题讨论】:

这有帮助吗? HTML header/footer 您的 HTML 错误。表头应该有行而不是另一个表的 div。我是。不需要和媒体 css 重复表头。 您是否尝试将标题 id 设置为 position: fixed with top: 0?我知道这适用于某些实现。 How to use HTML to print header and footer on every printed page of a document?的可能重复 【参考方案1】:

您可以通过 php 的实现来实现这一点。当我开始使用 PHP 时,我的导师让我们使用 PHP 创建了一个“网络模板”。这个“模板”将确保页面相似并且具有一致的页眉、导航、页脚等。

您可以创建一个文件 (thead.php),其中包含您想要重复的所有代码。我假设你想重复&lt;thead&gt;&lt;/thead&gt;之间的内容

(thead.php)

<thead>
    <div id="Header">
        <table style="width: 100%; table-layout: fixed;" id="tbl_1" class="table table-bordered">
            <tbody>
                <tr id="1">
                    <td style="height: 18px; border:solid; " ></td>
                    <td style="height: 18px; border:solid; "></td>
                    <td style="height: 18px; border:solid; "></td>
                    <td style="height: 18px; border:solid; "></td>
                </tr>
                <tr id="2">
                    <td style="height: 18px; border:solid; "></td>
                    <td style="height: 18px; border:solid; "></td>
                    <td style="height: 18px; border:solid; "></td>
                    <td style="height: 18px; border:solid; "></td>
                </tr>
            </tbody>
        </table>
    </div>
</thead>

(你的文件.php)

<style>
@media print 
    #Header 
        display: table-header-group;
    

    table 
        page-break-inside: auto;
    

    tr 
        page-break-inside: auto;
        position: static;
    

</style>


<div class="tab-pane active " id="template">
    <table>
        <?php include 'thead.php'; ?>
        <tbody>
            <div id="contents">
                <!--more then 800 rows in table-->
            </div>
        </tbody>
    </table>
</div>

这将导致您必须将文件类型更改为 .php 并且您必须使用本地服务器进行测试,因为浏览器无法处理 .php 文件。我个人使用 XAMPP,但我相信还有许多其他选择。

如果您还不了解任何 php,它的作用本质上是根据通过 .PHP 文件中的脚本提供给它的信息为您编写一个 HTML 文件。当文件通过服务器运行后到达浏览器时,它只是可以处理和显示的简单 HTML 代码。因此,如果您按照我向您展示的方式进行操作,到达浏览器的最终文件不会有任何不同,您需要编写的代码更少。

【讨论】:

以上是关于打印时使用 css 在每页上重复标题的主要内容,如果未能解决你的问题,请参考以下文章

s-s-rS如何在打印预览中重复每页上的表头

C# - 每页上的 itextSharp 小计

Rdlc tablix 列标题不在每一页上重复“在每一页上重复列标题”已被选中

修复了打印 CSS 中的背景

当我在 Chrome 和 IE 上打印时如何修复和重复每个页面底部的内容

CSS 打印,仅在第一页宽度 css 上的标题