打印文檔時出現嵌套表問題

Question

我有一張我正在嘗試打印的表格。所以基本結構是包含嵌套表都包含thead。一旦我做了印刷，pdf顯示重疊thead。

請查看附件鏈接以重新生成代碼。 https://www.dropbox.com/s/a0l0s7blh401tg7/table.html

<table> 
    <thead> 
     <tr> 
      <td>heading</td> 
     </tr> 
     <tbody> 
      <tr> 
       <td> 
        <table> 
         <thead> 
          <tr> 
           <th>Heading 2</th> 
          </tr> 
        </table> 
       </td> 
      </tr>    
     </tbody> 
    </thead> 
</table> 

Answer 1

試試下面的CSS （如果你有一個非常簡單的THEAD的只有一個藏漢這不僅有助於）：

thead { display: table-header-group } 
tfoot { display: table-row-group } 
tr { page-break-inside: avoid } 

---

編輯：

關於你的問題：你的thead重疊的原因是你的table標記本身。現在我們有多個table和thead，以及導致重疊的填充。我做了一些研究，發現了兩種不同的解決方案。

---

事實1：只有在打印時在你的標記的最新的thead會在第二頁上的地方。因此，您可以檢查和調整你的表像這樣working example here, print button on the top：如果你想在所有頁面上所有的THEAD信息是把所有th在在我看來唯一可行的解​​決方案：

<table> 
    <!-- thead on first page --> 
    <thead> 
     <tr> 
      <th> ... </th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td> 
       <table> 
        <!-- thead on first page an all following --> 
        <thead> 
         <tr> 
          <th> ... </th> 
         </tr> 
        </thead> 

        <tbody> 
         <tr> 
          <td> ... </td> 
         </tr> 
        </tbody> 
       </table> 
      </td> 
     </tr> 
    </tbody> 
</table> 

---

事實2一個thead在table的頂部，因此您必須在每一頁上所有信息working example for this solution, print button on the top

希望這有助於:)