2011-02-07 40 views
8

ブラウザー印刷機能を使用する場合、後続のページに表ヘッダーを表示しようとしています。 Firefoxの使用私は最初のページにヘッダーを表示することしかできません。ヘッダーはタグで定義されます。 コードは以下の通りです:次のページの表ヘッダーを印刷

<html> 
<head> 
    <style type="text/css"> 
     @media print 
     {   
      thead 
      { 
       display: table-header-group;  
      } 
     } 
    </style> 
</head> 
<body>  
    <table> 
     <thead> 
      <tr><td>header1</td></tr> 
      <tr><td>header2</td></tr> 
      <tr><td>header3</td></tr> 
      <tr><td>header4</td></tr> 
      <tr><td>header5</td></tr> 
      <tr><td>header6</td></tr> 
      <tr><td>header7</td></tr> 
      <tr><td>header8</td></tr> 
      <tr><td>header9</td></tr> 
      <tr><td>header10</td></tr> 
      <tr><td>header11</td></tr> 
      <tr><td>header12</td></tr> 
      <tr><td>header13</td></tr>     
     </thead> 
     <tbody> 
      <tr><td> 
      Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/> 
      Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/> 
      Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/> 
      Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/> 
      Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>Text<br/>   
      </td></tr> 
     </tbody> 
    <table> 

</body> 

私の説明をテストするために使用印刷プレビューを。 私がしたいようにあなたが

<tr><td>header13</td></tr> 

ヘッダはすべてのページに表示される次のコード行を削除した場合。どのようにこれを修正することができますか? これは、テーブルヘッダーの最大高さの問題です。

答えて

0

セルのテーブルヘッダーに<td>の代わりに<th>を使用してみます。ブラウザはすべてのページにこれらのヘッダーを自動的に印刷する必要があります。 また、各<tbody>行のセル数がヘッダーのセル数と等しいことを確認してください。

+0

私はあなたが言ったことを試みますが、残念ながらうまくいきません。それが動作していないことを確認するために私の例を試してから、 "header 13"行を削除してください。それから行動は期待される。私はtheadタグの最大高さの問題だと思います –

2

theadに行が多すぎる理由がわかりません。以下のコードはかなりうまくいきます(firefoxでテスト済み)。私も20テーブルのヘッダーをテストし、まだうまく動作します。

<html> 
<head> 
    <style type="text/css"> 
     @media print { 
      thead 
      { 
       display: table-header-group; 
      } 
     } 
    </style> 
</head> 
<body> 
    <table> 
     <thead> 
      <tr> 
       <th>header1</th> 
       <th>header2</th> 
       <th>header3</th> 
       <th>header4</th> 
       <th>header5</th> 
       <th>header6</th> 
       <th>header7</th> 
       <th>header8</th> 
       <th>header9</th> 
       <th>header10</th> 
       <th>header11</th> 
       <th>header12</th> 
       <th>header13</th> 
      </tr>    
     </thead> 
     <tbody> 
      <tr> 
       <td>text</td> 
       <td>text</td> 
       <td>text</td> 
       <td>text</td> 
       <td>text</td> 
       <td>text</td> 
       <td>text</td> 
       <td>text</td> 
       <td>text</td> 
       <td>text</td> 
       <td>text</td> 
       <td>text</td> 
       <td>text</td> 
      </tr> 
      <!-- 
       Code is too long to paste. 
       If you're using emmet/zencoding, try to expand 
       the code below to print 1000 rows 

       (tr>(td{text})*13)*1000 
      --> 
     </tbody> 
    <table> 
</body> 
+0

これは1行対13行ですか? –