CSS 列印排版實戰：用 @media print 動態插入頁首、頁尾與分頁符

網頁列印時想要固定頁首/頁尾（如公司抬頭、頁碼），並控制分頁位置？純 CSS + 少量 JavaScript 即可實現，無需後端產生 PDF。本文示範以 `

核心原理

• 列印版面寬度固定為 6.5 英吋（A4/Letter 留白後可用寬度）。
• 頁首、頁尾以 `
  ` 固定高度（如 1 英吋），`overflow:hidden` 隱藏溢出內容。
• 列印時透過 `@media print` 將頁首頁尾 `display:inline` 顯示，並用 `page-break-after:always` 強制分頁。
• JavaScript 在 `window.onload` 計算每列 `

關鍵 HTML 結構

<div id="header" class="hdrftr">頁首內容</div>
<div id="footer" class="hdrftr">頁尾內容</div>
<table id="tbl1" width="6.5in" border="0">
  <tr class="t1"><td>資料列 1</td></tr>
  <tr class="t1"><td>資料列 2</td></tr>
  ...
</table>

關鍵 CSS

.hdrftr { width: 6.5in; height: 1in; overflow: hidden; display: none; }
@media print {
  .hdrftr { display: inline; }
  tr.page-break { page-break-after: always; }
}
@media screen {
  .hdrftr { display: none; }
}

關鍵 JavaScript (簡化版)

window.onload = function() {
  const rows = document.querySelectorAll('#tbl1 .t1');
  const pageH = 8.5 * 96; // 8.5in * 96dpi (近似)
  const headerH = 1 * 96, footerH = 1 * 96;
  let accumulated = headerH;
  rows.forEach((row, i) => {
    accumulated += row.offsetHeight;
    if (accumulated + footerH > pageH) {
      // 前一列加分頁
      if (i > 0) rows[i-1].classList.add('page-break');
      // 插入頁尾+頁首邏輯（需 DOM 操作）
      accumulated = headerH + row.offsetHeight;
    }
  });
  // 最後加頁尾
};

注意事項

• 瀏覽器列印邊距、縮放設定會影響實際分頁，建議在列印預覽微調。
• 此法適用 IE5+、Edge、Chrome、Firefox 現代瀏覽器。
• 複雜報表建議改用專用報表工具或後端產生 PDF。

掌握此技巧，網頁即時變身可列印的專業報表，省去匯出 PDF 的額外步驟。

• 上一篇文章： Excel 去除儲存格空白字元完全攻略：資料驗證預防 + SUBSTITUTE 函數批次清洗
• 下一篇文章： Word 複製到記事本標點變半角？一招教你保留全角格式

XP 系統應用技巧

Windows XP 網路遠端關機完整教學：群組原則授權 + shutdown 命令

Windows XP 記憶卡讀不到？接觸不良、中毒、壞塊三大成因與修復工具箱完整指南

Windows XP IE 提示「確定允許此網頁存取剪貼簿嗎」？安全性設定啟用程式化剪貼簿存取