首頁 > web前端 > css教學 > 列印大型 HTML 表格時如何防止斷行?

列印大型 HTML 表格時如何防止斷行?

Patricia Arquette
發布: 2024-12-26 03:46:09
原創
364 人瀏覽過

How Can I Prevent Row Breaks When Printing Large HTML Tables?

管理 HTML 表格列印中的分頁符號

在列印大量 HTML 表格時,管理分頁符號對於避免難看的行切斷至關重要。最初的問題提出了一種常見的方法:使用堆疊的 DIV 而不是表格並強制執行必要的分頁符號。然而,在開始如此重大的改變之前,讓我們先探索一種保留表格使用的替代解決方案。

有效管理分頁符號的關鍵在於 CSS 屬性。將下列 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 }
登入後複製

表格的 page-break-inside 屬性指定表格內可以出現分頁符號。行的 page-break-inside 屬性可確保行不會跨頁拆分,而 page-break-after 屬性可防止在行後立即分頁。最後,表格頁首和頁尾元素的顯示屬性確保它們與表格關聯以用於列印目的。

以下是一個修改後的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 規則,您可以有效防止行中斷並確保多頁列印表格的完整性。

以上是列印大型 HTML 表格時如何防止斷行?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板