Bagaimana Saya Boleh Menghalang Pecah Halaman daripada Membahagi Baris Jadual Apabila Mencetak Jadual HTML Besar?-tutorial css-php.cn

Bagaimana Saya Boleh Menghalang Pecah Halaman daripada Membahagi Baris Jadual Apabila Mencetak Jadual HTML Besar?

Barbara Streisand

Lepaskan： 2024-12-17 15:58:10

asal

602 orang telah melayarinya

How Can I Prevent Page Breaks from Splitting Table Rows When Printing Large HTML Tables?

Mengelakkan Pecah Halaman dalam Pencetakan Jadual HTML Besar

Dalam pembangunan web, mencetak jadual HTML yang besar boleh menimbulkan cabaran apabila mengurus pemisah halaman. Isu ini timbul apabila baris jadual dipisahkan pada berbilang halaman, yang membawa kepada kebimbangan kebolehbacaan.

Masalahnya:

Apabila mencetak jadual HTML yang panjang, adalah mungkin untuk pemisah halaman berlaku di lokasi yang tidak sesuai, mengganggu kesinambungan data jadual. Ini berlaku apabila satu baris dibahagikan antara dua halaman, dengan sebahagian daripada baris muncul di bahagian bawah satu halaman dan bahagian yang tinggal di bahagian atas halaman berikutnya.

Penyelesaian:

Untuk mengurangkan isu ini, sifat CSS page-break-inside dan page-break-after boleh digunakan:

page-break-inside: Mengawal pemisah halaman dalam elemen. Apabila ditetapkan kepada auto, ia membenarkan pemisah halaman dalam elemen, memastikan baris jadual tidak dipecahkan.
pemecah halaman selepas: Menentukan sama ada pemisah halaman harus berlaku selepas elemen semasa. Dengan menetapkannya kepada auto, anda membenarkan pemisah halaman selepas setiap baris jadual untuk mengelakkan pemisahan.

Contoh Pelaksanaan:

Kod HTML dan CSS berikut menunjukkan cara untuk mengelakkan pemecahan halaman dalam pencetakan jadual HTML yang besar:

<!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 sifat CSS ini, jadual HTML kini akan menghormati halaman pecah, memastikan baris jadual tidak pernah dipecah merentas halaman, sekali gus mengekalkan kebolehbacaan.

Atas ialah kandungan terperinci Bagaimana Saya Boleh Menghalang Pecah Halaman daripada Membahagi Baris Jadual Apabila Mencetak Jadual HTML Besar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!