如何防止列印時 HTML 表格行跨頁拆分？-css教學-PHP中文網

如何防止列印時 HTML 表格行跨頁拆分？

Patricia Arquette

發布： 2024-12-14 22:56:14

原創

432 人瀏覽過

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中文網其他相關文章！