使用window.print打印时固定页眉并解决表格重叠问题求助

使用window.print()打印页面时，希望页眉在每一页固定显示，但生成的表格与页眉div出现重叠。以下是对应的HTML及print.css代码，寻求解决方法：

HTML代码 #

<div class="header">
    <center><div class="home-container1">
        <h1 class="home-text">PACKING LIST</h1>
        <img src="logo.svg" alt="image" class="home-image" />
    </div></center>
    <div class="date">
        <b>Date: </b><?php echo date('d/m/Y'); ?>
    </div>
    <div class="container">
        <div class="left-box">
            <p><b>FEURST</b></p>
            <p>BVD de la Boissonnette 42110 FEURS FRANCE</p>
        </div>
        <div class="middle-box">
            <p><b>Customer: </b><?php echo $name; ?></p>
            <p><b>Customer Code:</b> <?php echo $customer_code; ?></p>
            <p><b>Billing Address: </b><?php echo $billing_address; ?></p>
        </div>
        <div class="right-box">
            <p><b>Delivery Code: </b><?php echo $delivery; ?></p>
            <p><b>Delivery Address: </b><?php echo $delivery_address; ?></p>
            <p><b>Contact :</b> <?php echo $contact; ?></p>
            <p><?php echo $mail; ?></p>
            <p><?php echo $phone; ?></p>
        </div>
    </div>
    <div class="header1">
        <figure>
            <p><b><?php echo $total_box_count ?> SEA WOODEN CRATES / unit sizes 0,80 M X 1,20 M X 0.67 M</b></p>
            <p><b>Total Net weight:</b> <?php echo  $toplam_agirlik;?> Kg</p>
            <p><b>Total gross weight:</b> <?php echo  $gros;?> Kg</p>
            <p><b>Incoterms:</b> <?php echo $incoterms; ?></p>
        </figure>
    </div>
</div>

<div class="tablo" >
    <table>
        <thead>
        </thead>
        <tbody>
            <?php echo $table; ?>
        </tbody>
    </table>
</div>

原print.css代码 #

@media print {
  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    display: table-header-group;
    margin-bottom: 50px;
  }
  body {
    zoom: 71%;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  table {
    border-collapse: collapse;
    width: 100%;
  }
  tbody {
    display: table-row-group;
  }
  tr {
    page-break-inside: avoid;
    display: table-row;
  }
  td, th {
    border: 1px solid black;
    padding: 8px;
    text-align: left;
  }
  tr:last-child td:first-child {
    page-break-before: avoid;
  }
  .tablo {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin-top: 600px;
        page-break-inside: avoid;

        clear: both;
 page-break-before: always;
    margin-top: 600px;
  }
  .page:after {
    content: "";
    height: 600px; /* 
    page-break-after: always;
  }
  
}

解决方法 #

核心问题分析 #

原代码中.header同时使用position: fixed和display: table-header-group会导致打印布局冲突，加上.tablo设置了position: absolute打乱文档流，最终造成重叠。

修改后的print.css代码 #

@media print {
  /* 固定页眉，确保每一页顶部都显示 */
  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    /* 移除display: table-header-group，避免和fixed冲突 */
    background-color: white; /* 添加背景色防止内容透过显示 */
  }
  /* 给body设置顶部内边距，为页眉留出空间 */
  body {
    zoom: 71%;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    padding-top: 300px; /* 数值根据页眉实际高度调整，需测试确认 */
  }
  table {
    border-collapse: collapse;
    width: 100%;
  }
  tbody {
    display: table-row-group;
  }
  tr {
    page-break-inside: avoid;
    display: table-row;
  }
  td, th {
    border: 1px solid black;
    padding: 8px;
    text-align: left;
  }
  tr:last-child td:first-child {
    page-break-before: avoid;
  }
  /* 移除绝对定位，让表格回到正常文档流 */
  .tablo {
    page-break-inside: avoid;
    clear: both;
  }
}

关键调整说明 #

1. 页眉处理：保留position: fixed确保每页顶部显示，移除display: table-header-group避免布局冲突，添加白色背景防止下方内容透过页眉。
2. 内容留白：给body设置padding-top，数值匹配页眉实际高度，让第一页表格从页眉下方开始显示。
3. 表格容器：移除.tablo的绝对定位和不合理的外边距，让表格跟随文档流，第二页内容会自动在固定页眉下方排列，不会重叠。

额外建议 #

• 测试时调整padding-top数值，不同浏览器打印渲染可能略有差异，确保和页眉高度完全匹配。
• 若页眉高度不固定，可通过JavaScript动态计算并设置内边距：

  window.addEventListener('beforeprint', function() {
    const headerHeight = document.querySelector('.header').offsetHeight;
    document.body.style.paddingTop = `${headerHeight + 20}px`; // 加20px缓冲
  });
  

内容的提问来源于stack exchange，提问作者Gökhan Baştürk