打印HTML頁面

我的網頁上有一張很長的表格。當我打印它時，它看起來表格的最後一行是在一頁中（僅在頁面的頂部）。頁面的其餘部分是空白的。在下一頁我有嵌套表。我不知道，爲什麼下一張桌子不在第一頁最後一行的底部。打印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屬性。 http://www.w3schools.com/cssref/pr_print_pagebb.asp – SupremeDud 2012-03-22 13:15:03

你沒有在第二張表中關閉你'tbody' – 2012-03-22 13:16:00

我添加了page-break-before：避開第二張表（對於每一行），並且它生成相同的效果。 – Java 2012-03-22 13:30:34

試試這個代碼，並做了打印預覽。我在第一張桌子下面看到第二張桌子。

<!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

回答

相關問題