Question

我有一个项目需要打印一个包含许多行的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>

Answer 1

有可能通过PHP的实现来实现这一点。当我第一次启动PHP时，我的教师只是让我们使用PHP创建一个“Web模板”。这个“模板”将确保页面相似并具有一致的标题，导航，页脚等。

您可以创建一个文件（thead.php），该文件包含您想要重复的所有代码。我假设你想重复<thead></thead>

之间的内容

（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>

（yourfile.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在每个页面上重复标题

1 个答案: