thead繰り返しのCSSを使用して

Question

私はすべてのページでヘッダーを印刷するためのCSSのメディアクエリを使用していますが、それはうまく動作しますが、私は2より大きい列を増やすか、最後の列または高さのフォントサイズを増やし、すべてのページには印刷されません。

何がうまくいかないのか分かりません。 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; 
}