Rumah >hujung hadapan web >tutorial css >Bagaimanakah saya boleh mencapai pencetakan yang konsisten bagi pengepala dan pengaki tersuai pada setiap halaman laporan web?
Bagaimanakah saya boleh mencapai pencetakan yang konsisten bagi pengepala dan pengaki tersuai pada setiap halaman laporan web?
- Barbara Streisandasal
- 2024-10-25 11:42:02888semak imbas
Mencetak Pengepala dan Pengaki Halaman Web pada Setiap Halaman
Kemungkinan mencetak pengepala dan pengaki tersuai pada setiap halaman laporan web yang dicetak ialah pernah dipercayai tidak dapat dicapai. Walau bagaimanapun, kemajuan terkini dalam keupayaan penyemak imbas telah menjadikan ini kenyataan, terutamanya dalam kes Mozilla Firefox dan Internet Explorer.
Menggunakan Jadual untuk Mencapai Pengumpulan Halaman
Sebagai pendekatan yang berkesan, adalah mungkin untuk menggunakan jadual dalam kombinasi dengan penggayaan CSS untuk mencapai hasil yang diinginkan. Dengan melaksanakan gaya CSS berikut:
thead { display: table-header-group; }
tfoot { display: table-footer-group; }
anda boleh menetapkan elemen jadual tertentu sebagai pengepala atau pengaki. Ini membolehkannya diulang pada setiap halaman yang dicetak.
Contoh Struktur HTML
Untuk melaksanakan teknik ini, struktur HTML seperti berikut:
<code class="html"><body>
<table>
<thead><tr><td>Your header goes here</td></tr></thead>
<tfoot><tr><td>Your footer goes here</td></tr></tfoot>
<tbody>
<tr><td>
Page body in here -- as long as it needs to be
</td></tr>
</tbody>
</table>
</body></code>
Mengendalikan Media Bercetak
Untuk memastikan elemen ini hanya dipaparkan dalam cetakan, gunakan peraturan @media:
<code class="css">@media print {
thead { display: table-header-group; }
tfoot { display: table-footer-group; }
}
@media screen {
thead { display: none; }
tfoot { display: none; }
}</code>
Ini akan menyekat paparan pengepala dan pengaki pada skrin sambil mengekalkan kehadirannya dalam dokumen bercetak.
Sokongan dan Pertimbangan Penyemak Imbas
Sehingga 2015, teknik ini kekal berkesan dalam Mozilla Firefox dan Internet Explorer. Penyemak imbas berasaskan webkit (cth., Chrome, Safari) pernah mengalami isu dalam kawasan ini. Walau bagaimanapun, kemas kini terkini telah mengurangkan masalah ini dalam Chrome. Rujuk laporan pepijat yang disediakan di bawah untuk mendapatkan maklumat lanjut:
- [WebKit Bug 17205](https://bugs.webkit.org/show_bug.cgi?id=17205)
- [ Isu Chromium 24826](https://code.google.com/p/chromium/issues/detail?id=24826)
- [Isu Chromium 99124](https://code.google.com/p /chromium/issues/detail?id=99124)
Atas ialah kandungan terperinci Bagaimanakah saya boleh mencapai pencetakan yang konsisten bagi pengepala dan pengaki tersuai pada setiap halaman laporan web?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!