Bagaimanakah CSS Dapat Menghalang Pecah Baris Apabila Mencetak Jadual HTML Besar?-tutorial css-php.cn

Bagaimanakah CSS Dapat Menghalang Pecah Baris Apabila Mencetak Jadual HTML Besar?

Mary-Kate Olsen

Lepaskan： 2024-12-20 00:45:16

asal

388 orang telah melayarinya

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

Mengendalikan Pecah Halaman apabila Mencetak Jadual HTML Besar: Pendekatan CSS

Apabila mencetak jadual HTML yang luas, menghadapi pemisah halaman yang mengganggu kesinambungan baris boleh mengecewakan. Untuk menangani isu ini, pertimbangkan untuk menggunakan sifat pemisah halaman CSS.

Dengan menentukan page-break-inside:auto untuk elemen, penyemak imbas cuba melengkapkan jadual pada halaman semasa sebelum memulakan pemisah halaman. Selain itu, tetapkan page-break-inside:elakkan untuk elemen menghalang baris daripada berpecah merentas halaman.

Untuk mengekalkan keterlihatan pengepala dan pengaki, gunakan page-break-after:auto dalam peraturan. Ini memastikan bahawa baris semasa dilengkapkan sebelum pemisah halaman berlaku, menghalang pemisahan maklumat pengepala atau pengaki.

Kod berikut menunjukkan pendekatan ini:

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

Salin selepas log masuk

Dengan menggunakan peraturan CSS ini , anda boleh mengawal pemisah halaman dengan berkesan, memastikan baris dicetak dalam bentuk lengkap sambil mengekalkan integriti pengepala dan pengaki.

Atas ialah kandungan terperinci Bagaimanakah CSS Dapat Menghalang Pecah Baris Apabila Mencetak Jadual HTML Besar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!