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 Streisand
Lepaskan: 2024-10-25 11:42:02
asal
878 orang telah melayarinya

How can I achieve consistent printing of custom headers and footers on every page of a web report?

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; }
Salin selepas log masuk

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>
Salin selepas log masuk

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>
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan