Rumah >hujung hadapan web >tutorial css >Bagaimanakah Saya Boleh Mencegah Pecah Baris Apabila Mencetak Jadual HTML Besar?
Bagaimanakah Saya Boleh Mencegah Pecah Baris Apabila Mencetak Jadual HTML Besar?
- Patricia Arquetteasal
- 2024-12-26 03:46:09375semak imbas
Mengurus Pecah Halaman dalam Pencetakan Jadual HTML
Apabila berhadapan dengan pencetakan jadual HTML yang banyak, mengurus pemisah halaman adalah penting untuk mengelakkan pemotongan baris yang tidak sedap dipandang. Satu pendekatan biasa dicadangkan oleh soalan asal: menggunakan DIV bertindan dan bukannya jadual dan menguatkuasakan pemisah halaman yang diperlukan. Walau bagaimanapun, sebelum memulakan perubahan ketara sedemikian, mari kita terokai penyelesaian alternatif yang mengekalkan penggunaan jadual.
Kunci untuk mengurus pemisah halaman dengan berkesan terletak pada sifat CSS. Dengan menggunakan peraturan CSS berikut pada jadual anda, anda boleh menghalang baris daripada dipecahkan merentas berbilang halaman:
table { page-break-inside:auto }
tr { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group }
tfoot { display:table-footer-group }
Harta halaman-break-inside untuk jadual menentukan bahawa pemisah halaman boleh berlaku dalam jadual. Sifat page-break-inside untuk baris memastikan baris tidak akan dipisahkan merentasi halaman dan sifat page-break-after menghalang pemisah halaman sejurus selepas baris. Akhir sekali, sifat paparan untuk elemen pengepala dan pengaki jadual memastikan ia dikaitkan dengan jadual untuk tujuan pencetakan.
Di bawah ialah jadual HTML yang diubah suai yang menggabungkan sifat CSS 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>
Dengan melaksanakan peraturan CSS ini, anda boleh menghalang pemisah baris dengan berkesan dan memastikan integriti jadual bercetak anda merentas berbilang halaman.
Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencegah Pecah Baris Apabila Mencetak Jadual HTML Besar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!