如何防止打印时 HTML 表格行跨页拆分？-css教程-PHP中文网

首页

web前端

css教程

如何防止打印时 HTML 表格行跨页拆分？

Patricia Arquette

Dec 14, 2024 pm 10:56 PM

How Can I Prevent HTML Table Rows from Splitting Across Pages When Printing?

解决 HTML 表格打印中的分页符

打印大量 HTML 表格时，管理分页符对于保持可读性至关重要。要防止行跨页拆分，请探索以下解决方案：

您可以使用 CSS 样式来控制 HTML 表格中的分页符：

table { page-break-inside:auto }
tr    { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group }
tfoot { display:table-footer-group }

登录后复制

以下是包含这些内容的示例 HTML 表格应用的 CSS 样式：

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

登录后复制

实施这些 CSS 规则可确保

page-break-inside:avoid on tr 元素可以防止页面内的换行。
page-break-after:auto on tr 元素允许在每个元素之后分页行，确保它们不被分割。
thead 和 tfoot 元素上的 display:table-header-group 和 display:table-footer-group 保留表头以及各自页面上的页脚。

以上是如何防止打印时 HTML 表格行跨页拆分？的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn