<html><head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>分頁列印</title></head><body> <object id=WebBrowser classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 width=0 ></object> <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> <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>在這個之後分頁</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> </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> <div align="center"> <input type="button" value="打 印" onclick="javascript:window.print()" /> </div></body></html>
page-break-after: always;Firefox不執行。IE上面卻可以。怎麼做相容
Google對page-break-after的支援有問題，特別是table，需要將資料拆開，用div來做容器
你可以改成這樣的結構，通過列印樣式來控制，沒有問題。。
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <title>Paginated HTML</title> <style type="text/css" media="print"> div.page{page-break-after: always;page-break-inside: avoid;} .hide{display:table-header-group !important} </style> <style type="text/css"> .hide{display:none} </style> </head> <body> <div class="page"><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> <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> </tbody> <tfoot style="font-weight:bold" class="hide"> <tr> <td colspan="2" align="center" style="font-weight:bold; border:3px double blue"> 每頁都有的表尾 </td> </tr> </tfoot> </table> </div> <div class="page"> <table border="0" style="font-size:9pt;" width="300px" align="center"> <thead style="font-weight:bold" class="hide"> <tr> <td colspan="2" align="center" style="font-weight:bold; border:3px double red"> 每頁都有的表頭 </td> </tr> </thead> <tbody> <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> </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><div align="center"> <input type="button" value="打 印" onclick="javascript:window.print()" /> </div> </div> </body></html>Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
