透過 CSS 讓列印時 Table 的標頭內容可以每頁重複

希望透過 CSS 在使用 window.print() 時，列印出來的 Table 內容(假設資料量很大)，可以在每一頁都能重複標頭(Header)內容。首先，可以使用 CSS 裡的 page-break-before: always，可以強迫換頁。所以，我在範例中定義了：

<style type="text/css">
.newpage
{
page-break-before: always; 
}
</style>

假設我目前的 Table 內容如下：

<table border="1" id="tbDemo" >
  <thead>
  <tr><th id="pageHeader">編號</th></tr>
  </thead>
  
  <tbody>
  <tr><td>1</td></tr>
  <tr><td>2</td></tr>
  <tr><td>3</td></tr>
  <tr><td>4</td></tr>
  <tr><td>5</td></tr>
  <tr><td>6</td></tr>                             
  </tbody>
</table>    

接下來，使用 jQuery 讓 Table 每兩筆資料(實際上是情況而調整筆數設定)就自動產生一個標頭內容，且將這標頭內容套用剛剛加入的 CSS 設定。

<script>
$(function(){

var $rows=$("#tbDemo > tbody > tr");  
$rows.each(function(i) {
//取2的倍數,排除最後一筆
if((i+1) % 2==0 && i!=($rows.size()-1))
{
   $(this).after("<tr class='newpage'><th>"+$("#pageHeader").text()+"</th></tr>");      
}
})
})
</scrip>

如此，在使用預覽列印時，就可以看到以下每兩筆資料一頁且有標頭的結果：

原本以為，故事這樣就結束了，但...唉，看一下 FireFox 的結果～

在 FireFox (ver 3.6.3) 的標頭檔，卻重複了兩次。主要原因，是因為我的 Table 定義，用了 <thead> 與 <tbody> 的樣式。在 FireFox 裡，如果遇到換頁的時候，他會自動為每一頁的 Table 內容加上 <thead>  ，而我剛剛又手動用 jQuery 新增了一次，所以才會得到這結果。換言之，使用 FireFox 的瀏覽器，只要你的 Table 內容有用<thead> 與 <tbody> 的樣式，那每一頁自動都會幫你加上標頭喔。只是，目前我真的不希望他主動幫我加。

此時，或許加上判斷瀏覽器的程式，來決定是否要使用 jQuery 來手動增加標頭，會是一個辦法。但，我沒有這麼做。我索性就不用<thead> 與 <tbody> 的樣式。我將 Table 的定義改成以下：

<table id="tGen"  border="1" >
<tr class="trHeader"><td>編號</td></tr>
<tr class="trBody"><td>1</td></tr>
<tr class="trBody"><td>2</td></tr>
<tr class="trBody"><td>3</td></tr>
<tr class="trBody"><td>4</td></tr>
<tr class="trBody"><td>5</td></tr>
<tr class="trBody"><td>6</td></tr>
</table>

而 jQuery 也調整如下：

<script>
$(function(){
 var $rows=$("#tGen tr[class=trBody]");  
   $rows.each(function(i) {
   //取2的倍數,排除最後一筆
  if((i+1) % 2==0 && i!=($rows.size()-1))
  {     
      $(this).after("<tr class='newpage' ><td>"+$("#tGen tr[class=trHeader]").text()+"</td></tr>");
  }
   })    
});   
</script>

而最後出來的結果，就皆大歡喜了。

文章參考：
MEMO-網頁列印強迫分頁
CSS page-break-before Property
.after()
web打印中如何强制分页
Printing Tables
Printing Headers

測試程式下載：
https://sites.google.com/site/paladinsharefiles/home/filelist/RPT.zip?attredirects=0&d=1