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

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

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


当前回答

从思南扩展Ü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标记,并使用there page-break-inside:avoid,它可以工作,但会打乱您的表布局。

其他回答

我检查了许多解决方案,任何人都不能很好地工作。

所以我尝试了一个小技巧,它起作用了:

脚带风格:位置:固定;底部:0 px; 位于最后一页的底部,但如果页脚太高,则会与表的内容重叠。

只有Tfoot: display: table-footer-group; 没有重叠,但没有在最后一页的底部…

让我们放两个tfoot:

TFOOT。砂矿{ 显示:table-footer-group; 身高:130 px; } TFOOT。内容{ 显示:table-footer-group; 位置:固定; 底部:0 px; 身高:130 px; } < TFOOT类=“砂矿”> < TR > < TD > <!——此处为空 --> 道明> < / < / TR > < / TFOOT > < TFOOT类= >“内容” < TR > < TD > 你的长文字或高图像在这里 道明> < / < / TR > < / TFOOT >

一是在非最后一页保留位置,二是放在你的固定页脚。

接受的答案在所有浏览器中都不适用,但以下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;
}

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

使用这些CSS属性:

page-break-after

page-break-before 

例如:

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

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

via

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

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

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

我面对同样的问题,到处寻找解决方案,最后,我找到了适合我的所有浏览器的解决方案。

html {
height: 0;
}

使用这个css或代替css,你可以有这个javascript

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

希望这对你也有用。