## 表格可以解決列印頁面上重複頁首和頁尾的挑戰嗎？-css教學-PHP中文網

在多個列印頁面上實作頁眉和頁腳重複

首頁

web前端

css教學

## 表格可以解決列印頁面上重複頁首和頁尾的挑戰嗎？

Linda Hamilton

Oct 26, 2024 am 04:08 AM

## Can Tables Solve the Challenge of Repeating Headers and Footers on Printed Pages?

在多個列印頁面上實作頁眉和頁腳重複

簡介：

在產生的列印文件上保持頁首和頁腳的一致性從網頁中獲取資訊可能是一個令人困惑的挑戰。儘管進行了廣泛的研究，但許多解決方案仍然難以捉摸。然而，本文試圖澄清並解決這個問題。

可以在每個頁面上列印頁首和頁尾嗎？

根據您的查詢，出現了問題：是是否可以在多個列印頁面上重複自訂頁首和頁尾？雖然您表示懷疑，但探索此類解決方案的潛力是有意義的。

解決問題：

您已經準確地得出結論，CSS 媒體類型可能不適合在這種情況下的主要障礙。相反，您研究了使用表格和表頭標籤的可能性。然而，讓我們更深入地研究這種方法。

解決方案：

儘管表格在版面設計中存在明顯的缺陷，但事實證明它是一個有效的解決方案案件。透過設定以下CSS 樣式，您可以實現所需的重複：

thead { display: table-header-group; }
tfoot { display: table-footer-group; }

登入後複製

隨後，在渲染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>

登入後複製

確保頁眉和頁腳僅在列印時出現，請使用以下@media 參數：

@media print {
    thead { display: table-header-group; }
    tfoot { display: table-footer-group; }
}
@media screen {
    thead { display: none; }
    tfoot { display: none; }
}

登入後複製

瀏覽器相容性：

此方法最初在Firefox 和IE 中起作用。不過，現在 Chrome 中也已經解決了這個問題。因此，Chrome 問題追蹤器中的上述錯誤可能被認為是過時的。

以上是## 表格可以解決列印頁面上重複頁首和頁尾的挑戰嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn