在打印时使用css重复每页的标题

我有一个需要打印多行HTML表格的项目。我想在每页顶部显示thead部分。我正在使用IE11浏览器。在打印时使用css重复每页的标题

<style> 
    @media print { 
     #Header { 
      display: table-header-group; 
     } 

     table { 
      page-break-inside: auto; 
     } 

     tr { 
      page-break-inside: auto; 
      position: static; 
     } 
    } 
</style> 


<div class="tab-pane active " id="template"> 
    <table> 
     <thead> 
      <div id="Header"> 
       <table style="width: 100%; table-layout: fixed;" id="tbl_1" class="table table-bordered"> 
        <tbody> 
         <tr id="1"> 
          <td style="height: 18px; border:solid; " ></td> 
          <td style="height: 18px; border:solid; "></td> 
          <td style="height: 18px; border:solid; "></td> 
          <td style="height: 18px; border:solid; "></td> 
         </tr> 
         <tr id="2"> 
          <td style="height: 18px; border:solid; "></td> 
          <td style="height: 18px; border:solid; "></td> 
          <td style="height: 18px; border:solid; "></td> 
          <td style="height: 18px; border:solid; "></td> 
         </tr> 

        </tbody> 
       </table> 
      </div> 
     </thead> 
     <tbody> 
      <div id="contents"> 
       <!--more then 800 rows in table--> 
      </div> 
     </tbody> 
    </table> 
</div>

来源

2016-08-22 Prashant16

这有帮助吗？ [HTML header/footer]（http://stackoverflow.com/questions/1360869/how-to-use-html-to-print-header-and-footer-on-every-printed-page-of-a-document -w） – Whothehellisthat

您的HTML错误。表头只是应该有行，而不是另一个表的div。我不需要和媒体CSS重复表头。 –

您是否尝试过将标头ID设置为位置：用顶部固定：0？我知道这适用于某些实现。 –

您可能通过PHP的实现来实现这一点。当我渴望开始使用PHP时，我的导师刚刚让我们使用PHP创建了一个“Web模板”。这个'模板'将确保页面是相似的，并且具有一致的标题，导航，页脚等。

您可以创建一个文件（thead.php），它将包含所有要重复的代码。我假设你想重复<thead></thead>

（thead.php）

<thead> 
    <div id="Header"> 
     <table style="width: 100%; table-layout: fixed;" id="tbl_1" class="table table-bordered"> 
      <tbody> 
       <tr id="1"> 
        <td style="height: 18px; border:solid; " ></td> 
        <td style="height: 18px; border:solid; "></td> 
        <td style="height: 18px; border:solid; "></td> 
        <td style="height: 18px; border:solid; "></td> 
       </tr> 
       <tr id="2"> 
        <td style="height: 18px; border:solid; "></td> 
        <td style="height: 18px; border:solid; "></td> 
        <td style="height: 18px; border:solid; "></td> 
        <td style="height: 18px; border:solid; "></td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
</thead>

（yourfile.php）

<style> 
@media print { 
    #Header { 
     display: table-header-group; 
    } 

    table { 
     page-break-inside: auto; 
    } 

    tr { 
     page-break-inside: auto; 
     position: static; 
    } 
} 
</style> 


<div class="tab-pane active " id="template"> 
    <table> 
     <?php include 'thead.php'; ?> 
     <tbody> 
      <div id="contents"> 
       <!--more then 800 rows in table--> 
      </div> 
     </tbody> 
    </table> 
</div>

之间的内容这将导致你必须改变你的文件类型到.php文件，你将不得不使用本地服务器进行测试，因为浏览器无法处理.php文件。我个人使用XAMPP，但我相信还有很多其他的选择。

如果您还不知道任何php，它所做的实质上是基于通过.PHP文件中的脚本给出的信息为您写入HTML文件。在文件通过服务器运行后到达浏览器时，它就是可以处理和显示的简单HTML代码。因此，如果按照我向您展示的方式进行操作，最终得到浏览器的文件将没有任何区别，您只需要编写更少的代码。

来源

2017-05-15 00:39:11 Lordbug

在打印时使用css重复每页的标题

回答

相关问题