2017-09-22 66 views
-5

当一个页面上一半,显示拆分HTML表我有我的HTML几行的表。当打印HTML时,表格被削减一半,并在下一页打印额外的行。有没有办法将表格拆分为两个并在同一页面上垂直显示?如何打印

下面是HTML:

#wrapTable { 
 
    width: auto; 
 
    border: 0px solid; 
 
    display: block; 
 
}
<div style="margin:0"> 
 
    <table id="wrapTable"> 
 
    <tr> 
 
     <th> Col1 </th> 
 
     <th> Col2 </th> 
 
     <th> Col3 </th> 
 
    </tr> 
 
    <tr> 
 
     <td> Row1 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    <tr> 
 
     <td> Row2 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    <tr> 
 
     <td> Row3 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    <tr> 
 
     <td> Row4 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    <tr> 
 
     <td> Row5 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    <tr> 
 
     <td> Row6 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    <tr> 
 
     <td> Row7 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    <tr> 
 
     <td> Row8 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    <tr> 
 
     <td> Row9 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    <tr> 
 
     <td> Row10 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    </table> 
 
    <table id="wrapTable"> 
 
    <tr> 
 
     <td> Row11 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    <tr> 
 
     <td> Row12 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    <tr> 
 
     <td> Row13 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    <tr> 
 
     <td> Row14 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    <tr> 
 
     <td> Row15 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    <tr> 
 
     <td> Row16 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    <tr> 
 
     <td> Row17 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    <tr> 
 
     <td> Row18 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    <tr> 
 
     <td> Row19 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    <tr> 
 
     <td> Row20 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    </table> 
 
</div>

我试图通过分割表分为两个和垂直相邻显示它们显示在同一页面中的所有行。

+1

请提供您是否尝试过的代码和更好的explination为所发生的事情。 jsfiddle.net也会有所帮助。要回答你的问题,可能有办法。 – Gezzasa

+0

您可以使用带有CSS的媒体查询来显示不同于打印的表格,但不提供HTML,我们将无法为您提供帮助。 – freginold

+0

谢谢@freginold编辑问题。 – Sugan88

回答

1

我通过使用CSS属性所期望的结果“显示:内联”。

#wrapTable { 
 
    width: auto; 
 
    border: 0px solid; 
 
    display: inline; 
 
}
<div style="margin:0"> 
 
    <table id="wrapTable"> 
 
    <tr> 
 
     <th> Col1 </th> 
 
     <th> Col2 </th> 
 
     <th> Col3 </th> 
 
    </tr> 
 
    <tr> 
 
     <td> Row1 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    <tr> 
 
     <td> Row2 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    <tr> 
 
     <td> Row3 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    <tr> 
 
     <td> Row4 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    <tr> 
 
     <td> Row5 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    <tr> 
 
     <td> Row6 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    <tr> 
 
     <td> Row7 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    <tr> 
 
     <td> Row8 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    <tr> 
 
     <td> Row9 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    <tr> 
 
     <td> Row10 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    </table> 
 
    <table id="wrapTable"> 
 
    <tr> 
 
     <th> Col1 </th> 
 
     <th> Col2 </th> 
 
     <th> Col3 </th> 
 
    </tr> 
 
    <tr> 
 
     <td> Row11 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    <tr> 
 
     <td> Row12 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    <tr> 
 
     <td> Row13 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    <tr> 
 
     <td> Row14 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    <tr> 
 
     <td> Row15 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    <tr> 
 
     <td> Row16 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    <tr> 
 
     <td> Row17 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    <tr> 
 
     <td> Row18 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    <tr> 
 
     <td> Row19 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    <tr> 
 
     <td> Row20 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    </table> 
 
</div>