我有一个项目,需要打印一个有很多行的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>

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

其他回答

在Chrome中,没有一个答案对我有用。AAverin在GitHub上创建了一些有用的Javascript,这对我来说很有用:

只需将js添加到您的代码中,并将类'splitForPrint'添加到您的表中,它将整齐地将表分割为多个页面,并将表头添加到每个页面。

使用这些CSS属性:

page-break-after

page-break-before 

例如:

<html>
<head>
<style>
@media print
{
table {page-break-after:always}
}
</style>
</head>

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

via

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

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>

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

接受的答案在所有浏览器中都不适用,但以下css确实适用于我:

tr    
{ 
  display: table-row-group;
  page-break-inside:avoid; 
  page-break-after:auto;
}

html的结构是:

<table>
  <thead>
    <tr></tr>
  </thead>
  <tbody>
    <tr></tr>
    <tr></tr>
    ...
  </tbody>
</table>

在我的例子中,有一些附加的问题与头tr,但这解决了原来的问题,保持表行中断。

由于标题的问题,我最终以:

#theTable td *
{
  page-break-inside:avoid;
}

这并没有阻止行断裂;只是每个单元格的内容。

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