为了账号安全,请及时绑定邮箱和手机立即绑定

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

/ 猿问

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

拉丁的传说 2019-10-12 16:07:00

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

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

我的问题是表格在多页上的打印方式。它有时会将一行切成两半,这使得它无法读,因为其中一半在页面的边缘,其余的则打印在下一页的顶部。

我能想到的唯一可行的解决方案是使用堆叠的div,而不是表和强制分页(如果需要的话)。但在我经历所有的改变之前,我想我可以在这里问一问。


查看完整描述

3 回答

?
www说
<!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>



查看完整回答
反对 回复 2019-10-13
?
天涯尽头无女友

注意:当使用分页后:总是为标签,它将创建一个分页后的最后一点表,创建一个完全空白页在结束每一次!要解决这个问题,只需将其更改为“分页后:自动”。它将正确中断,而不会创建额外的空白页。

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



查看完整回答
反对 回复 2019-10-13
?
jeck猫

从锡南纽尔解决方案扩大:

<!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,它能工作,但会乱搞你的桌子布局。



查看完整回答
反对 回复 2019-10-13

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信