HTMLページを印刷

私は私のウェブページに非常に長いテーブルを持っています。私はそれを印刷すると、テーブルの最後の行が1ページにあるように見えます（ページの上部のみ）。残りのページは空白です。次のページには、ネストテーブルがあります。私は、次の表が最初のページの最後の行の一番下にない理由を知りません。 HTMLでHTMLページを印刷

は次のようになります。

は

<table align="left" cellspacing="0" cellpadding="0" border="1"> 
    <thead> 
    <tr>....</tr> 
    </thead> 
    <tbody> 
    <tr>...</tr> 
    </tbody> 
</table> 

<table align="center" width="800" cellspacing="0" cellpadding="0" border="1" style="margin: 0 auto 0 auto; page-break-inside: avoid;"> 
    <tbody> 
    <tr> 
     <td align="left" width="200">xxx</td> 
     <td align="right" width="200">xxx</td> 
     <td align="right" width="200">xxx</td> 
     <td align="right" width="200">x</td> 
    </tr> 
    <tr> 
     <td align="left" width="200"> 
     <td align="right" width="200"> 
     <td align="right" width="200"> 
     <td align="right" width="200"> 
    </tr> 
    <tr></tr> 
</table>

CSS：

background-color: white; 
border: 1px solid #000000; 
border-collapse: collapse; 
border-spacing: 0; 
font-size: 10px; 
vertical-align: middle;

出典

2012-03-22 Java

を使用してページを使用してみてくださいすることを無効にすることができます-break-before/afterプロパティを2番目のテーブルに追加します。 http://www.w3schools.com/cssref/pr_print_pagebb.asp – SupremeDud

2番目のテーブルで 'tbody'を閉じなかった –

私はpage-break-beforeを追加します：2番目のテーブルに（すべての行に対して）避けてください。同じ効果を生成します.. – Java

はこのコードを試してみて、印刷プレビューを行います。私は最初のテーブルのすぐ下に2番目のテーブルを取得します。

<!DOCTYPE HTML> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
     <title>Print of HTML Page</title> 
     <style type="text/css"> 
      table{ 
       width: 800px; 
       background-color: white; 
       border: 1px solid #000000; 
       border-collapse: collapse; 
       border-spacing: 0; 
       font-size: 10px; 
       vertical-align: middle; 
      } 
     </style> 
    </head> 
    <body> 
     <table border="1"> 
      <thead> 
      <tr> 
       <th>Table 1 Header</th> 
      </tr> 
      </thead> 
      <tfoot> 
      <tr> 
       <td>Table 1 Footer</td> 
      </tr> 
      </tfoot> 
      <tbody> 
      <tr> 
       <td>Table 1 Row 1</td> 
      </tr> 
      <tr> 
       <td>Table 1 Row 2</td> 
      </tr> 
      <tr> 
       <td>Table 1 Row 3</td> 
      </tr> 
      <tr> 
       <td>Table 1 Row 4</td> 
      </tr> 
      <tr> 
       <td>Table 1 Row 5</td> 
      </tr> 
      <tr> 
       <td>Table 1 Row 6</td> 
      </tr> 
      <tr> 
       <td>Table 1 Row 7</td> 
      </tr> 
      <tr> 
       <td>Table 1 Row 8</td> 
      </tr> 
      <tr> 
       <td>Table 1 Row 9</td> 
      </tr> 
      <tr> 
       <td>Table 1 Row 10</td> 
      </tr> 
      <tr> 
       <td>Table 1 Row 11</td> 
      </tr> 
      <tr> 
       <td>Table 1 Row 12</td> 
      </tr> 
      <tr> 
       <td>Table 1 Row 13</td> 
      </tr> 
      <tr> 
       <td>Table 1 Row 14</td> 
      </tr> 
      <tr> 
       <td>Table 1 Row 15</td> 
      </tr> 
      <tr> 
       <td>Table 1 Row 16</td> 
      </tr> 
      <tr> 
       <td>Table 1 Row 17</td> 
      </tr> 
      <tr> 
       <td>Table 1 Row 18</td> 
      </tr> 
      <tr> 
       <td>Table 1 Row 19</td> 
      </tr> 
      <tr> 
       <td>Table 1 Row 20</td> 
      </tr> 
      <tr> 
       <td>Table 1 Row 21</td> 
      </tr> 
      <tr> 
       <td>Table 1 Row 22</td> 
      </tr> 
      <tr> 
       <td>Table 1 Row 23</td> 
      </tr> 
      <tr> 
       <td>Table 1 Row 24</td> 
      </tr> 
      <tr> 
       <td>Table 1 Row 25</td> 
      </tr> 
      <tr> 
       <td>Table 1 Row 26</td> 
      </tr> 
      <tr> 
       <td>Table 1 Row 27</td> 
      </tr> 
      <tr> 
       <td>Table 1 Row 28</td> 
      </tr> 
      <tr> 
       <td>Table 1 Row 29</td> 
      </tr> 
      <tr> 
       <td>Table 1 Row 30</td> 
      </tr> 
      <tr> 
       <td>Table 1 Row 31</td> 
      </tr> 
      <tr> 
       <td>Table 1 Row 32</td> 
      </tr> 
      <tr> 
       <td>Table 1 Row 33</td> 
      </tr> 
      <tr> 
       <td>Table 1 Row 34</td> 
      </tr> 
      <tr> 
       <td>Table 1 Row 35</td> 
      </tr> 
      <tr> 
       <td>Table 1 Row 36</td> 
      </tr> 
      <tr> 
       <td>Table 1 Row 37</td> 
      </tr> 
      <tr> 
       <td>Table 1 Row 38</td> 
      </tr> 
      <tr> 
       <td>Table 1 Row 39</td> 
      </tr> 
      <tr> 
       <td>Table 1 Row 40</td> 
      </tr> 
      <tr> 
       <td>Table 1 Row 41</td> 
      </tr> 
      <tr> 
       <td>Table 1 Row 42</td> 
      </tr> 
      <tr> 
       <td>Table 1 Row 43</td> 
      </tr> 
      <tr> 
       <td>Table 1 Row 44</td> 
      </tr> 
      <tr> 
       <td>Table 1 Row 45</td> 
      </tr> 
      <tr> 
       <td>Table 1 Row 46</td> 
      </tr> 
      <tr> 
       <td>Table 1 Row 47</td> 
      </tr> 
      <tr> 
       <td>Table 1 Row 48</td> 
      </tr> 
      <tr> 
       <td>Table 1 Row 49</td> 
      </tr>                                                                                                                     
      </tbody> 
     </table> 

     <table border="1" style="page-break-inside: avoid;"> 
      <tbody> 
      <tr> 
       <td>Table 2 Row 1 Cell 1</td> 
       <td>Table 2 Row 1 Cell 2</td> 
       <td>Table 2 Row 1 Cell 3</td> 
       <td>Table 2 Row 1 Cell 4</td> 
      </tr> 
      <tr> 
       <td>Table 2 Row 2 Cell 1</td> 
       <td>Table 2 Row 2 Cell 2</td> 
       <td>Table 2 Row 2 Cell 3</td> 
       <td>Table 2 Row 2 Cell 4</td> 
      </tr> 

     </table> 

    </body> 
</html>

出典

2012-04-03 05:32:01 techlead

あなたはテーブルが内部破壊されているので、別途

@media print { 
    .... 
}

を使用して印刷するために使用されるスタイルシートを制御することができ、あなたは多分

@media print { 
    table { 
     page-break-inside: avoid; 
    } 
}

出典

2012-04-03 05:39:08 Starx

答えて

関連する問題