THEAD 与打印页眉上的页面内容重叠

Posted 2023-03-05

【中文标题】THEAD 与打印页眉上的页面内容重叠

【英文标题】：THEAD is overlapping with page contents on Print page headers

【发布时间】：2021-05-15 03:10:42

【问题描述】：

我设计了一个表格，如果表格中有多个页面，我计划将其用作页眉。 在表格的顶部还有一些带有一些附加信息的 DIV，并且在第二页上打印时表格内容与表格标题重叠

我的 html 如下所示

        <div class="row page-break-before">
             <div class="col-sm-6"  style="padding-right:0; border-right:2px solid #000000">
             </div>
             <div class="col-sm-6" style="padding-left:0;">
             </div>
             <div class="col-sm-6" style="padding-right:0; border-right:2px solid #000000">
             </div>
             <div class="col-sm-6" style="padding-left:0;">
             </div>
             <div class="col-sm-12" style="border-top: 2px solid #000000;">
                <table class="table table-condensed">
                                    <thead>
                            <tr>
                             <th colspan="9">Header Row 1</th>
                            </tr> 
                            <tr>
                             <th>Header col 1</th>
                             <th>Header col 2</th>
                             <th>Header col 3</th> ...
                             <th>Header col 9</th>
                            </tr> 
                        </thead>
                        <tbody>
                        </tbody>
                </table>
 
            </div>
        </div>

页面级 CSS 如下所示

    table 
    page-break-inside: auto


thead 
    display: table-header-group


tfoot 
    display: table-row-group


tr 
    page-break-inside: avoid

生成的带有重叠的打印预览是这样的

如果我删除表格上方的 4 个 div 列 [具有 col-sms-6 类的那些]，这个问题似乎得到了解决。 我试图将 4 个 div 保持在一行中，但仍然没有运气。试图在表格开始之前放置并清空行仍然没有运气 带有引导 col 类的 DIV 的排列方式是否有问题，导致页眉与表格内容重叠

【问题讨论】：

***.com/a/39276255/9981067，这对我有用，只需将 overflow-x: visible !important; 用于包含表格的 div。

【参考方案1】：

我自己也遇到了。我发现这对我有用，但 thead 只显示在第一页：

@media print 
  thead display: table-row-group;