问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

社区维基
1
新手上路，请多包涵

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

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

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

原文由 h3. 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译htmlcssprintinghtml-table
阅读 557
2 个回答
得票最新
社区维基
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>

原文由 Sinan Ünür 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基
1

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

原文由 Josh P 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题
logo
Stack Overflow 翻译
子站问答
访问
宣传栏