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

2018-07-01 15:06:00

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

我的问题是表格在多个页面上打印的方式。它有时会将一行切成两半，使其不可读，因为其中一半位于页面的出血边缘，其余的位于下一页的顶部。

我能想到的唯一可行的解决方案是使用堆叠的DIV而不是表格，并且强制页面 - 如果需要，可以打破。但在完成整个变更之前，我想我可以在这里问过。

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

注意：使用页面中断后：始终为标签，它会在表格的最后一位之后创建分页符，每次都在末尾创建一个完全空白的页面！要解决这个问题，只需将其更改为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>

从思南Ü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>

看起来页面中断：避免在某些浏览器中仅考虑块元素，不适用于单元格，表格，行或内嵌块。

如果你尝试显示：阻止TR标签，并在那里使用page-break-inside：避免，它可以工作，但是会随着你的表格布局而混乱。

链接地址: http://www.djcxy.com/p/88191.html

上一篇: How to deal with page breaks when printing a large HTML table

下一篇: how do I create an HTML table with fixed/frozen left column and scrollable body?