Question

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

我的问题是桌子在多页上打印的方式。它有时会减少一半，使其无法读取，因为一半位于页面的边缘，其余部分打印在下一页的顶部。

我能想到的唯一可行的解决方案是使用堆叠的DIV而不是表格，并在需要时强制分页。但在完成整个更改之前，我认为我可以在此问这里。

Answer 1

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

Answer 2

注意：使用page-break-after时：总是对于标记，它会在表的最后一位之后创建一个分页符，每次最后创建一个完全空白的页面！要解决这个问题，只需将其更改为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>

Answer 3

从SinanÜnür解决方案扩展：

<!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 }
    div   { page-break-inside:avoid; } /* This is the key */
    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>
        <tr>
            <td><div>Long<br />cell<br />should'nt<br />be<br />cut</div></td>
        </tr>
        <tr>
            <td><div>Long<br />cell<br />should'nt<br />be<br />cut</div></td>
        </tr>
        <!-- 500 more rows -->
        <tr>
            <td>x</td>
        </tr>
    </tbody>
    </table>
</body>
</html>

似乎某些浏览器中的page-break-inside:avoid仅考虑块元素，而不是单元格，表格，行也不考虑内联块。

如果您尝试display:block TR标记，并使用page-break-inside:avoid，那么它可以正常工作，但会对您的表格布局感到困惑。

Answer 4

这里没有任何答案适用于Chrome。 GitHub上的AAverin创建了some useful Javascript for this purpose，这对我有用：

只需将js添加到您的代码中，并将类“splitForPrint”添加到您的表中，它就会将表格整齐地分成多个页面，并将表格标题添加到每个页面。

Answer 5

使用这些CSS属性：

page-break-after

page-break-before

例如：

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

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

via

Answer 6

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

<强> 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();
}

像魅力一样！

Answer 7

我最终跟随@ vicenteherrera的方法，进行了一些调整（可能是bootstrap 3）。

基本上;我们不能破坏tr或td，因为它们不是块级元素。因此，我们将div嵌入到每个中，并将page-break-*规则应用于div。其次;我们在每个div的顶部添加一些填充，以补偿任何样式工件。

<style>
    @media print {
        /* avoid cutting tr's in half */
        th div, td div {
            margin-top:-8px;
            padding-top:8px;
            page-break-inside:avoid;
        }
    }
</style>
<script>
    $(document).ready(function(){
        // Wrap each tr and td's content within a div
        // (todo: add logic so we only do this when printing)
        $("table tbody th, table tbody td").wrapInner("<div></div>");
    })
</script>

边距和填充调整是必要的，以抵消正在引入的某种抖动（我的猜测 - 来自bootstrap）。我不确定我是否会从这个问题的其他答案中提出任何新的解决方案，但我想这可能会对某人产生帮助。

Answer 8

我遇到了同样的问题，并四处寻找解决方案，最后，我找到了适用于所有浏览器的东西。

html {
height: 0;
}

使用此CSS或代替CSS，您可以使用此javascript

$("html").height(0);

希望这对您也一样。

Answer 9

I checked many solutions and anyone wasn't working good.

So I tried a small trick and it works:

tfoot with style:tableView is placed at the bottom of last page, but if footer is too high it is overlapped by content of table.

tfoot with only: position: fixed; bottom: 0px; isn't overlapped, but is not on the bottom of last page...

Let's put two tfoot:

display: table-footer-group;

TFOOT.placer {
  display: table-footer-group;
  height: 130px;
}

TFOOT.contenter {
  display: table-footer-group;
  position: fixed;
  bottom: 0px;	
  height: 130px;
}

One reserves place on non-last pages, second puts in your accual footer.

Answer 10

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

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

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

Answer 11

好伙计......这里的大多数解决方案并没有起作用。所以这就是我的工作方式..

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>

第一组头部用作虚拟头部，因此在分页时不会在第二个头部（即原始头部）中缺少顶部边框。

Answer 12

接受的答案在所有浏览器中都不适用于我，但是跟随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>

在我的情况下，thead tr还存在一些其他问题，但这解决了保持表格行不被破坏的原始问题。

由于标题问题，我最终得到了：

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

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

如何在打印大型HTML表时处理分页符

12 个答案: