每頁都有的表頭和列印分頁
阿新 • • 發佈：2018-12-27
本文轉自：http://www.cnblogs.com/RitchieChen/archive/2008/07/30/1256829.html
在做專案的時候碰到的。使用者要求，頁面呈現太長時，列印的時候，要求，每頁上都要有表頭。找了好久，才在網上找到。原來，是要對每個表格，定義其thead，並對其樣式設定成：style="display:table-header-group"。如果要求有表尾，也一樣，要定義其tfoot，並對style="display:table-footer-group"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>無標題文件</title> <style type="text/css"> @media print { INPUT { display: none; } } </style> </head><body> <table border="0" style="font-size: 9pt;" width="300px" align="center"> <thead style="display: table-header-group; font-weight: bold"> <tr> <td colspan="2" align="center" style="font-weight: bold; border: 3px double red">每頁都有的表頭</td> </tr> </thead> <tbody style="text-align: center"> <tr> <td>表格內容</td> <td>表格內容</td> </tr> <tr> <td>表格內容</td> <td>表格內容</td> </tr> <tr> <td>表格內容</td> <td>表格內容</td> </tr> <tr> <td>表格內容</td> <td>表格內容</td> </tr> <tr> <td>表格內容</td> <td>表格內容</td> </tr> <tr> <td>表格內容</td> <td>表格內容</td> </tr> <tr style="page-break-after: always;"> <td>表格內容1</td> <td>表格內容</td> </tr> <tr> <td>表格內容</td> <td>表格內容</td> </tr> <tr> <td>表格內容</td> <td>表格內容</td> </tr> <tr> <td>表格內容</td> <td>表格內容</td> </tr> <tr> <td>表格內容</td> <td>表格內容</td> </tr> <tr> <td>表格內容</td> <td>表格內容</td> </tr> <tr> <td>表格內容</td> <td>表格內容</td> </tr> <tr style="page-break-after: always;"> <td>表格內容2</td> <td>表格內容</td> </tr> <tr> <td>表格內容</td> <td>表格內容</td> </tr> <tr> <td>表格內容</td> <td>表格內容</td> </tr> <tr> <td>表格內容</td> <td>表格內容</td> </tr> <tr> <td>表格內容</td> <td>表格內容</td> </tr> <tr> <td>表格內容</td> <td>表格內容</td> </tr> <tr> <td>表格內容</td> <td>表格內容</td> </tr> <tr style="page-break-after: always;"> <td>表格內容3</td> <td>表格內容</td> </tr> </tbody> <tfoot style="display: table-footer-group; font-weight: bold"> <tr> <td colspan="2" align="center" style="font-weight: bold; border: 3px double blue">每頁都有的表尾</td> </tr> </tfoot> </table> <input type="button" value=" 打 印 " onclick="javascript: window.print();"> </body> </html>