打印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

打印HTML页面

回答

相关问题