Question

我有一个报告，我正在使用Chrome的打印选项。我需要为每个页面重复标题。

我正在按以下内容划分内容，并且工作正常。

<table>
    <thead>
        <!-- Header Content(need to repeat)-->
    </thead>
    <tbody>
        <!-- Body Content-->
    </tbody>
</table>

这可以正常工作，但可以达到标题的特定高度。

当我的页眉超过特定高度时，重复的页眉将停止工作。

当我尝试将纸张尺寸从chrome打印更改为大于在相同的页眉高度下可以使用的尺寸时。

例如如果我的页眉在A4尺寸的纸张上不起作用，如果我尝试将纸张尺寸更改为较大的尺寸（A3），并且假设我的重复页眉在A4的纸张上工作，并且如果我更改为小尺寸（A5），则同样可以使用。不起作用。

我不确定它停止工作的高度，但是它正在我的实时项目和示例中发生。

请查看示例，并让我知道我是否在某处失踪？

Answer 1

断点是245px （至少在Chrome中是这样），但是根据其内容，您可能需要减小它。我们发现将其保持在230以下似乎有效。

如果您需要的还更多，我们将内容分成两部分，每部分上限为230。解决方法是堆叠多个表头，使其看起来像一个大头。在第二个表中嵌套第二个表。这不是完美的，但可以。希望这会有所帮助。

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="example.css" />
</head>
<body>
    <table class="w-100">
        <thead>
            <tr>
                <td>
                    <!--place holder for the fixed-position header-->
                    <div class="header1">
                        <h1>Header #1</h1>
                    </div>
                </td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <table class="w-100">
                        <thead>
                            <tr>
                                <td>
                                    <div>
                                        <div class="header2">
                                         <h1>Header #2</h1>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sodales maximus nunc a dapibus. Mauris scelerisque efficitur velit sit amet accumsan. Praesent mattis nisl libero. Nullam ullamcorper vehicula aliquam. Vivamus nulla ipsum, aliquam et eros sit amet, placerat placerat orci. Nunc sit amet commodo mi. Morbi tincidunt nisi vitae mollis ullamcorper. Integer lacinia viverra justo quis tincidunt. Suspendisse non fringilla tellus, id accumsan nulla.

                                Mauris vehicula semper suscipit. Fusce vel ligula egestas, fringilla nulla sed, malesuada elit. Donec tellus est, pulvinar non suscipit ac, rhoncus sed ex. Etiam vulputate mauris et placerat iaculis. Sed scelerisque pretium turpis, vitae porta nibh gravida sed. Proin rhoncus pharetra elit id aliquam. Sed ut efficitur augue. Vestibulum quis velit vel diam gravida tincidunt. Morbi sit amet nisi ut ex posuere imperdiet in non quam. Morbi sit amet turpis sed lorem ullamcorper congue eget id leo. Nullam pulvinar lectus ligula, a rutrum erat volutpat in. Curabitur cursus ut dui vitae ornare.

                                Aliquam leo mauris, dapibus sit amet suscipit quis, lacinia euismod arcu. Donec blandit, felis id auctor pulvinar, tortor lorem faucibus eros, non viverra odio felis quis mauris. Phasellus scelerisque mi id pellentesque sodales. Fusce ipsum tellus, egestas ac ultricies nec, vehicula a odio. Aliquam luctus elit tortor, sit amet ultricies enim porta at. Nam hendrerit ligula varius quam fringilla elementum dictum id sapien. Ut ac blandit nibh. Aliquam vulputate finibus libero, tristique egestas metus varius et. Donec ornare magna lectus.

                                Cras imperdiet sit amet arcu quis maximus. Nulla id felis vestibulum, lacinia urna nec, interdum magna. Phasellus sit amet tristique massa. Integer vitae ante imperdiet, commodo eros vel, mollis metus. Aenean maximus quis est nec hendrerit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent interdum pellentesque finibus. Etiam sed placerat nibh. Pellentesque nec pharetra justo, consequat vestibulum erat. Sed sit amet augue ut nisi mattis laoreet. Sed vestibulum odio ut urna egestas fermentum. Vestibulum viverra, nunc sit amet iaculis feugiat, nisl velit condimentum sapien, sit amet blandit nunc enim ut tellus. Aenean scelerisque arcu at gravida mattis. Donec vestibulum leo id ipsum pulvinar sodales.

                                Etiam ullamcorper sapien imperdiet massa rhoncus, nec sagittis sapien gravida. Donec erat justo, scelerisque et justo quis, accumsan congue nulla. In commodo velit dolor, sed placerat leo mollis sed. Donec lobortis eget leo sit amet tincidunt. Morbi non pulvinar arcu, at aliquet velit. In bibendum elit sit amet fringilla imperdiet. Proin gravida mi a convallis sodales. Suspendisse vestibulum lectus sed aliquet convallis. Proin eget diam varius, suscipit ante a, commodo odio. Etiam mattis laoreet elit pharetra mattis. Vivamus nec volutpat odio. Sed eget feugiat tortor, sed convallis turpis. Ut in est sed lacus egestas feugiat ut eget diam. Nam ultrices aliquet metus, pulvinar varius sapien dignissim vitae. Interdum et malesuada fames ac ante ipsum primis in faucibus.

                                Nulla aliquam neque eu augue luctus, vel mattis est placerat. Nunc ultrices leo sem. Nam aliquam massa vel tortor consectetur, accumsan finibus purus ornare. Duis consequat tortor ut velit bibendum, quis bibendum sapien volutpat. Nunc ac turpis erat. Quisque sapien ligula, pellentesque consequat laoreet nec, efficitur sed enim. Sed id tortor sed nulla cursus sollicitudin vitae ac dolor.

                                Fusce rhoncus tellus vel lorem laoreet lacinia. Sed finibus elit ut dui scelerisque, vel cursus neque pellentesque. In viverra leo consequat urna hendrerit pretium. Nullam elementum, dolor ac pellentesque venenatis, tortor lorem imperdiet mi, eget dictum dolor sapien vel ipsum. Nunc nec imperdiet arcu. Donec nulla mauris, accumsan at velit vel, tempus eleifend felis. Pellentesque ut felis nisi. Praesent viverra, leo a vestibulum condimentum, nisl lorem ultricies leo, nec elementum diam odio in velit. Nulla vitae leo scelerisque, ultrices purus eget, ultricies ex. Cras hendrerit, neque a accumsan euismod, dui ex mollis tortor, et tincidunt est risus eget tellus. Vivamus a dictum metus, aliquam tincidunt est. Maecenas quis iaculis neque, a vulputate arcu. Suspendisse dui purus, euismod nec ipsum congue, tincidunt egestas risus. Cras ac sem felis.

                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Pellentesque neque lacus, dictum quis leo non, vulputate dapibus ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean diam urna, malesuada eget blandit a, consequat quis sem. Nulla facilisi.

                                Nunc enim odio, porta eget elit et, placerat dignissim enim. In euismod dui pharetra diam ultrices, non semper lorem lacinia. Sed ut mollis mi. Etiam cursus fringilla rutrum. In feugiat ut ligula vel laoreet. Mauris volutpat lectus nec ligula vehicula, sed commodo nunc laoreet. Duis tortor odio, interdum sit amet interdum sed, consectetur vitae ipsum. Fusce fermentum elit libero, sit amet facilisis urna faucibus a. Nam sit amet dictum nisi, hendrerit laoreet metus.

                                Cras euismod semper erat eget pretium. Proin magna erat, convallis at sollicitudin sed, pharetra at mi. Sed consectetur id magna ac bibendum. Morbi a est egestas, aliquet magna eu, ornare dolor. In viverra sagittis hendrerit. Maecenas vel eleifend libero. Pellentesque in odio nec risus viverra facilisis ut eget ex. Nulla porta libero pellentesque velit efficitur ornare.

                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sodales maximus nunc a dapibus. Mauris scelerisque efficitur velit sit amet accumsan. Praesent mattis nisl libero. Nullam ullamcorper vehicula aliquam. Vivamus nulla ipsum, aliquam et eros sit amet, placerat placerat orci. Nunc sit amet commodo mi. Morbi tincidunt nisi vitae mollis ullamcorper. Integer lacinia viverra justo quis tincidunt. Suspendisse non fringilla tellus, id accumsan nulla.

                                Mauris vehicula semper suscipit. Fusce vel ligula egestas, fringilla nulla sed, malesuada elit. Donec tellus est, pulvinar non suscipit ac, rhoncus sed ex. Etiam vulputate mauris et placerat iaculis. Sed scelerisque pretium turpis, vitae porta nibh gravida sed. Proin rhoncus pharetra elit id aliquam. Sed ut efficitur augue. Vestibulum quis velit vel diam gravida tincidunt. Morbi sit amet nisi ut ex posuere imperdiet in non quam. Morbi sit amet turpis sed lorem ullamcorper congue eget id leo. Nullam pulvinar lectus ligula, a rutrum erat volutpat in. Curabitur cursus ut dui vitae ornare.

                                Aliquam leo mauris, dapibus sit amet suscipit quis, lacinia euismod arcu. Donec blandit, felis id auctor pulvinar, tortor lorem faucibus eros, non viverra odio felis quis mauris. Phasellus scelerisque mi id pellentesque sodales. Fusce ipsum tellus, egestas ac ultricies nec, vehicula a odio. Aliquam luctus elit tortor, sit amet ultricies enim porta at. Nam hendrerit ligula varius quam fringilla elementum dictum id sapien. Ut ac blandit nibh. Aliquam vulputate finibus libero, tristique egestas metus varius et. Donec ornare magna lectus.

                                Cras imperdiet sit amet arcu quis maximus. Nulla id felis vestibulum, lacinia urna nec, interdum magna. Phasellus sit amet tristique massa. Integer vitae ante imperdiet, commodo eros vel, mollis metus. Aenean maximus quis est nec hendrerit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent interdum pellentesque finibus. Etiam sed placerat nibh. Pellentesque nec pharetra justo, consequat vestibulum erat. Sed sit amet augue ut nisi mattis laoreet. Sed vestibulum odio ut urna egestas fermentum. Vestibulum viverra, nunc sit amet iaculis feugiat, nisl velit condimentum sapien, sit amet blandit nunc enim ut tellus. Aenean scelerisque arcu at gravida mattis. Donec vestibulum leo id ipsum pulvinar sodales.

                                Etiam ullamcorper sapien imperdiet massa rhoncus, nec sagittis sapien gravida. Donec erat justo, scelerisque et justo quis, accumsan congue nulla. In commodo velit dolor, sed placerat leo mollis sed. Donec lobortis eget leo sit amet tincidunt. Morbi non pulvinar arcu, at aliquet velit. In bibendum elit sit amet fringilla imperdiet. Proin gravida mi a convallis sodales. Suspendisse vestibulum lectus sed aliquet convallis. Proin eget diam varius, suscipit ante a, commodo odio. Etiam mattis laoreet elit pharetra mattis. Vivamus nec volutpat odio. Sed eget feugiat tortor, sed convallis turpis. Ut in est sed lacus egestas feugiat ut eget diam. Nam ultrices aliquet metus, pulvinar varius sapien dignissim vitae. Interdum et malesuada fames ac ante ipsum primis in faucibus.

                                Nulla aliquam neque eu augue luctus, vel mattis est placerat. Nunc ultrices leo sem. Nam aliquam massa vel tortor consectetur, accumsan finibus purus ornare. Duis consequat tortor ut velit bibendum, quis bibendum sapien volutpat. Nunc ac turpis erat. Quisque sapien ligula, pellentesque consequat laoreet nec, efficitur sed enim. Sed id tortor sed nulla cursus sollicitudin vitae ac dolor.

                                Fusce rhoncus tellus vel lorem laoreet lacinia. Sed finibus elit ut dui scelerisque, vel cursus neque pellentesque. In viverra leo consequat urna hendrerit pretium. Nullam elementum, dolor ac pellentesque venenatis, tortor lorem imperdiet mi, eget dictum dolor sapien vel ipsum. Nunc nec imperdiet arcu. Donec nulla mauris, accumsan at velit vel, tempus eleifend felis. Pellentesque ut felis nisi. Praesent viverra, leo a vestibulum condimentum, nisl lorem ultricies leo, nec elementum diam odio in velit. Nulla vitae leo scelerisque, ultrices purus eget, ultricies ex. Cras hendrerit, neque a accumsan euismod, dui ex mollis tortor, et tincidunt est risus eget tellus. Vivamus a dictum metus, aliquam tincidunt est. Maecenas quis iaculis neque, a vulputate arcu. Suspendisse dui purus, euismod nec ipsum congue, tincidunt egestas risus. Cras ac sem felis.

                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Pellentesque neque lacus, dictum quis leo non, vulputate dapibus ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean diam urna, malesuada eget blandit a, consequat quis sem. Nulla facilisi.

                                Nunc enim odio, porta eget elit et, placerat dignissim enim. In euismod dui pharetra diam ultrices, non semper lorem lacinia. Sed ut mollis mi. Etiam cursus fringilla rutrum. In feugiat ut ligula vel laoreet. Mauris volutpat lectus nec ligula vehicula, sed commodo nunc laoreet. Duis tortor odio, interdum sit amet interdum sed, consectetur vitae ipsum. Fusce fermentum elit libero, sit amet facilisis urna faucibus a. Nam sit amet dictum nisi, hendrerit laoreet metus.

                                Cras euismod semper erat eget pretium. Proin magna erat, convallis at sollicitudin sed, pharetra at mi. Sed consectetur id magna ac bibendum. Morbi a est egestas, aliquet magna eu, ornare dolor. In viverra sagittis hendrerit. Maecenas vel eleifend libero. Pellentesque in odio nec risus viverra facilisis ut eget ex. Nulla porta libero pellentesque velit efficitur ornare.
                                </p>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>
                    <!--place holder for the fixed-position footer-->
                    <div class="page-footer-space"></div>
                </td>
            </tr>
        </tfoot>
    </table>
    <div class="footer w-100">
        <h2>footer</h2>
    </div>
</body>

</html>

CSS：

.header1, .page-header-space {
    height: 230px!important;
    overflow:hidden;
}

.footer, .page-footer-space {
    height: 230px;
}

.header1{
    background-color: rgba(223, 223, 223, 0.5);
}

.header2{
    background-color: rgba(223, 223, 223, 0.5);
    height:230px;
}

.footer{
    background-color: rgba(223, 223, 223, 0.5);
}

@media print{
    .page-header, .page-header-space {
        height: 230px!important;
        overflow:hidden;
    }

    .footer {
        position: fixed;
        bottom: 1px;
    }
    thead {display: table-header-group;}
    tfoot {display: table-footer-group;}
    body {margin: 0;}
}


.w-100{width:100%;}



/*---Reset---*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    border-spacing:0;
}

网页上可打印的每页重复标题的标题高度是多少？

1 个答案: