thead重複使用css

Question

我使用css媒體查詢打印在每個頁面上的標題，它工作正常，但當我增加列大於兩個或增加最後一列或設置高度的字體大小，它不工作，即它是沒有打印在所有頁面上。

我無法理解發生了什麼問題。我想用表結構來完成它，而不是使用div position:fixed。請檢查下面的代碼或請建議任何其他代碼來完成此任務。

在此先感謝。

<!–-css code -–> 
<style> 
    @media print { 
     thead { display: table-header-group;} 
    } 
</style> 
<!–-css code- –> 

<!–-html code -–> 
<table id=」tbl_head」 width=」100%」> 
    <thead> 
     <tr> 
      <th style=」border-bottom:2px solid #999;」> 
       <!--Customize Header --> 
       <table width="100%"> 
        <tbody> 
        <tr> 
         <td colspan="3"> 
         <h4 style="text-align: center; font-weight: normal; background: #ccc none repeat scroll 0% 0%; font-size: 16px; padding: 8px 0px; margin: 2px 0 0 0; border: 1px solid #000;">FULLY COMPUTERISED LAB</h4> 
         </td> 
        </tr> 
        <tr> 
         <td style="text-align:left;"> 
         <span style="text-align: left;margin-bottom: 0px;font-size: 22px;font-weight:bold">Test</span> 
         <span style="font-size: 12px;margin-top: 5px">Test Centre</span> 
         </td> 
         <td style="text-align:left;"> 
         <span style="font-size:18px;margin-bottom: 2px;margin-top: 2px">Dr. sharma</span> 
         <span style="margin-top:2px">M.D.</span> 
         </td> 
         <td style="text-align:left;"> 
         <span style="font-size:10px"><b>Address</b></span> 
         <span style="font-size:10px"><b>Phone: 0731-787878, Mobile: </b></span> 
         <span style="font-size:10px"><b>Email: example2514@gmail.com</b></span> 
         <span style="font-size:10px"><b>Time: 7:30am to 10pm; Sunday 8am to 1pm</b></span> 
         </td> 
        </tr> 
       </tbody> 
      </table> 
      <!--Customize Header --> 
      </th> 
     </tr> 
     </thead> 
     <!--thead tag close --> 
     <tbody> 
      <tr> 
      <td> 
        <!-- some other code here --> 
      </td> 
      </tr> 
     </tbody> 
     </table> 
    <!–-html code -–> 

Answer 1

我相信這個例子會幫助你。有了它，您可以將文本放入任意數量的獨立列！ http://www.w3schools.com/css/tryit.asp?filename=trycss3_column-count

.class name or #id name { 
-webkit-column-count: 3; /* Chrome, Safari, Opera */ 
-moz-column-count: 3; /* Firefox */ 
column-count: 3; 
}