首頁 > web前端 > css教學 > 如何在不使用 JavaScript 的情況下列印 Web 報表中的自訂頁首和頁尾?

如何在不使用 JavaScript 的情況下列印 Web 報表中的自訂頁首和頁尾?

Mary-Kate Olsen
發布: 2024-10-25 11:00:02
原創
316 人瀏覽過

How to Print Custom Headers and Footers in a Web Report Without Using JavaScript?

在每個頁面上列印自訂頁眉和頁腳

產生基於Web 的列印報告時,可能需要包含自訂頁首和頁尾每頁的頁尾。然而,最初假設該功能在瀏覽器視窗中是不可能的。

儘管之前有研究,但透過使用表格出現了一個可能的解決方案。透過使用 CSS 設定表格元素的樣式,可以分別使用 thead 和 tfoot 標籤來定位頁首和頁尾。

<table style="display: table">
  <thead style="display: table-header-group">
    <tr><td>Your header goes here</td></tr>
  </thead>
  <tfoot style="display: table-footer-group">
    <tr><td>Your footer goes here</td></tr>
  </tfoot>
  <tbody>
    <!-- Report body -->
  </tbody>
</table>
登入後複製

為了確保頁眉和頁腳僅在印刷媒體上可見,CSS 媒體查詢可以實現:

@media print {
  thead { display: table-header-group; }
  tfoot { display: table-footer-group; }
}
@media screen {
  thead { display: none; }
  tfoot { display: none; }
}
登入後複製

最初,解決方案預計僅適用於Firefox 和Internet Explorer。然而,最近的更新已擴展了其對 Chrome 和 Safari 的兼容性。

這種基於表格的方法提供了一種可行的解決方法,用於在每個頁面上列印自訂頁首和頁腳,即使 Internet Explorer 6 中的 CSS 支援有限。

以上是如何在不使用 JavaScript 的情況下列印 Web 報表中的自訂頁首和頁尾?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板