打印大型HTML表时如何处理换页

我有一个项目，需要打印一个有很多行的HTML表。

我的问题是表格打印多页的方式。它有时会把一行切成两半，使它无法阅读，因为一半在一页的流血边缘，剩下的打印在下一页的顶部。

我能想到的唯一可行的解决方案是使用堆叠的div而不是一个表，并在需要时强制换页。但在经历整个变化之前，我想我可以在这里问一下。

当前回答

好男人……上面的大多数解都没用。这就是我的工作方式。

HTML

<table>
  <thead>
   <tr>
     <th style="border:none;height:26px;"></th>
     <th style="border:none;height:26px;"></th>
     .
     .
   </tr>
   <tr>
     <th style="border:1px solid black">ABC</th>
     <th style="border:1px solid black">ABC</th>
     .
     .
   <tr>
  </thead>
<tbody>

    //YOUR CODE

</tbody>
</table>

第一组头部被用作一个假的，这样就不会有一个丢失的顶部边界在第二个头部(即。原始页头)，而分页。

2017-07-06 07:41:53

其他回答

我最近用一个很好的解决方案解决了这个问题。

CSS:

.avoidBreak { 
    border: 2px solid;
    page-break-inside:avoid;
}

JS:

function Print(){
    $(".tableToPrint td, .tableToPrint th").each(function(){ $(this).css("width",  $(this).width() + "px")  });
    $(".tableToPrint tr").wrap("<div class='avoidBreak'></div>");
    window.print();
}

效果好极了!

2015-06-30 15:25:53

注意:当使用page-break-after:always for标签时，它将在表的最后一位之后创建一个分页符，每次都在末尾创建一个完全空白的页面! 要解决这个问题，只需将其更改为page-break-after:auto。它将正确地断开，不会创建额外的空白页。

<html>
<head>
<style>
@media print
{
  table { page-break-after:auto }
  tr    { page-break-inside:avoid; page-break-after:auto }
  td    { page-break-inside:avoid; page-break-after:auto }
  thead { display:table-header-group }
  tfoot { display:table-footer-group }
}
</style>
</head>

<body>
....
</body>
</html>

2011-10-14 05:07:46

好男人……上面的大多数解都没用。这就是我的工作方式。

HTML

<table>
  <thead>
   <tr>
     <th style="border:none;height:26px;"></th>
     <th style="border:none;height:26px;"></th>
     .
     .
   </tr>
   <tr>
     <th style="border:1px solid black">ABC</th>
     <th style="border:1px solid black">ABC</th>
     .
     .
   <tr>
  </thead>
<tbody>

    //YOUR CODE

</tbody>
</table>

第一组头部被用作一个假的，这样就不会有一个丢失的顶部边界在第二个头部(即。原始页头)，而分页。

2017-07-06 07:41:53

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<style type="text/css">
    table { page-break-inside:auto }
    tr    { page-break-inside:avoid; page-break-after:auto }
    thead { display:table-header-group }
    tfoot { display:table-footer-group }
</style>
</head>
<body>
    <table>
        <thead>
            <tr><th>heading</th></tr>
        </thead>
        <tfoot>
            <tr><td>notes</td></tr>
        </tfoot>
        <tbody>
        <tr>
            <td>x</td>
        </tr>
        <tr>
            <td>x</td>
        </tr>
        <!-- 500 more rows -->
        <tr>
            <td>x</td>
        </tr>
    </tbody>
    </table>
</body>
</html>

2009-11-19 14:31:42

我已经尝试了上面给出的所有建议，并为这个问题找到了简单而有效的跨浏览器解决方案。此解决方案不需要样式或分页符。对于解决方案，表格的格式应该是:

<table>
    <thead>  <!-- there should be <thead> tag-->
        <td>Heading</td> <!--//inside <thead> should be <td> it should not be <th>-->
    </thead>
    <tbody><!---<tbody>also must-->
        <tr>
            <td>data</td>
        </tr>
        <!--100 more rows-->
    </tbody>
</table>

以上格式已测试并可在跨浏览器中工作

2017-03-13 06:42:30

打印大型HTML表时如何处理换页

推荐文章

最新文章

标签