Header 在第二页之后重叠内容，页边距也会影响我在打印时固定 header

Question

我要打印一个摘要页，其中包含 table 超过 100 行。

我已经修复了 header 和页脚。

这是我的 html 页面：

       #header{
        position: fixed;
        right: 0;
        top: 0;
        left: 0;
    }
    
    #footer{
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
    }
   
   @media print {
        table {
            page-break-after: auto;
        }
    
        tr {
            page-break-inside: avoid;
            page-break-after: auto;
        }
    
        td {
            page-break-inside: avoid;
            page-break-after: auto;
        }
    
        th {
            page-break-inside: avoid;
            page-break-after: auto;
        }
    
        thead {
            display: table-header-group;
        }
    
        tfoot {
            display: table-footer-group;
        }
    
    }

 <html>
    <body>
        <div id="header">...</div>
        <div id="footer">...</div>
        <div class="container">
            <!-- here my table content --->
        </div>
    </body>
    </html>

为了解决我的问题，如果我添加 @page{margin-top:15px}，那么 header 也会受到此边距的影响。

我花了一整天的时间，任何帮助都会很棒。谢谢。

Answer 1

为什么要放在内容之前。你能post用户问题的图片来理解你的问题吗？

Answer 2

经过大量研究，我能够通过向 thead 添加额外的 tr 来增加间距来完成我的任务。

<html>
    <body>
        <div id="header">...</div>
        <div id="footer">...</div>
        <div class="container">
            <table>
                <thead>
                    <tr class="extra-spacing-tr"></tr>
                    <-- rest of the table -->
                </thead>
            </table>
        </div>
    </body>
    </html>

并将高度应用于该 tr

.extra-spacing-tr {
    height: 20px;
}

Header 在第二页之后重叠内容，页边距也会影响我在打印时固定 header

Header overlaps content after second page and page margins also affects my fixed header while printing

html

css

wkhtmltopdf