HTML表格应该在每个页面上重复标题,而且不应将章节分成2页

Question

HTML表格应该在每个页面上重复标题,而且不应将章节分成2页

我有打印HTML表的问题,我没有找到任何解决方案,所以我希望你能帮助我.

我需要使用这两个规则创建表(可能带有CSS):

当HTML表格超过下一个A4页面时,我需要在新页面的顶部重复HTML标题;
我需要定义表中的某些部分 - 这一部分必须是在同一页上 - 它不能在多个页面被分割......在表中会更加的部分,每个部分必须是整体上的一个页面(一个A4页面可以容纳更多部分,但一个部分不能拆分为更多A4页面).

你能帮助我吗？

编辑:它现在正在工作,但我想在每个页面的顶部应用保证金,但它不起作用.

<html>
    <head>
        <title>pokus</title>
        <meta charset='UTF-8' />
        <style type='text/css'>

        @media print
        {
            tbody {
                page-break-inside: avoid;
            }
            thead {
                display: table-header-group;
                margin-top: 100px;
            }
        }
        </style>
    </head>
    <body>
    <table>
        <thead>
            <tr>
                <td>Column 1</td>
                <td>Column 2</td>
                <td>Column 3</td>
            </tr>
        </thead>
        <tbody>
            <tr><td>Blok1</td><td>Blok1</td><td>Blok1</td></tr>
            <tr><td>Blok1</td><td>Blok1</td><td>Blok1</td></tr>
            <tr><td>Blok1</td><td>Blok1</td><td>Blok1</td></tr>
            <tr><td>Blok1</td><td>Blok1</td><td>Blok1</td></tr>
            .... more rows ... 
            <tr><td>Blok1</td><td>Blok1</td><td>Blok1</td></tr>
            <tr><td>Blok1</td><td>Blok1</td><td>Blok1</td></tr>
        </tbody>
        <tbody>
            <tr><td>Blok2</td><td>Blok2</td><td>Blok2</td></tr>
            <tr><td>Blok2</td><td>Blok2</td><td>Blok2</td></tr>
            .... more rows ....
            <tr><td>Blok2222222</td><td>Blok2</td><td>Blok2</td></tr>
        </tbody>
        <tbody>
            <tr><td>Blok3</td><td>Blok3</td><td>Blok3</td></tr>
                    ....more rows
            <tr><td>Blok3</td><td>Blok3</td><td>Blok3</td></tr>
        </tbody>
    </table>
    </body>
</html>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Cly*_*yff 7

你可以完成你想要的一些东西css和html:

1)使用thead标签.正如文件所说:

(...)此外,当打印跨越多个页面的大表时,这些元素可以使表格页眉和页脚打印在每页的顶部和底部.

2)您可以使用该page-break-inside物业.在这里查看更多.

如果您在项目中应用该问题时遇到任何问题,请随时编辑您的问题,详细说明您的操作以及意外行为.

编辑:

关于边距,我不知道为什么,但它确实我们不能为该元素添加边距...但你可以使用填充.IE:

<style type="text/css">
    ... your css ... 

    thead tr {
        padding-top: 100px;
    }
</style>

Run Code Online (Sandbox Code Playgroud)

归档时间：	10 年前
查看次数：	5473 次
最近记录：	8 年，10 月前