首頁 >web前端 >css教學 >如何防止列印時 HTML 表格行跨頁拆分？

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

Patricia Arquette原創: 2024-12-14 22:56:14433瀏覽

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

css html auto break display table tr

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：JavaScript 如何動態增強網站樣式？下一篇：JavaScript 如何動態增強網站樣式？

看更多