在每张打印纸上重复内容
Geo*_*rge 5 html javascript css printing
我在网页中有这样的结构，假设表格很长。
\n\n<header>\n <h1><img src="//some_logo.jpg"/> 2016 Report</h1>\n</header>\n<section>\n <table style="width:100%">\n <tr>\n <th>Firstname</th>\n <th>Lastname</th> \n <th>Age</th>\n </tr>\n <tr>\n <td>Jill</td>\n <td>Smith</td> \n <td>50</td>\n </tr>\n <tr>\n <td>Eve</td>\n <td>Jackson</td> \n <td>94</td>\n </tr>\n </table>\n</section>\n<footer>\n <h3><img src="//some_image.jpg"/> 2016 \xc2\xa9 The report company</h3>\n</footer>\n我需要的是打印这张长表格，但在每一页中重复我的页眉和页脚。
\n\n像这样
\n\n
我已经尝试过position:fixed页眉和页脚，但问题是内容在每个页面的页眉和页脚下切片。
CSS3 规则在 Chrome 中无效。
\n\n我没有找到任何 js 的解决方案。
\n\n有任何想法吗？
\n这个例子应该可以工作。请参阅代码中的注释。
\n\n<!DOCTYPE html>\n<html>\n<head>\n<style>\n/*@media print{ */\n.tbl{display:table;}\n.tbl > div{display:table-row;}\n/* table structure is three level: table > row > cell */\n.tbl > div > *{display:table-cell;}\n/* special cases */\n.tbl .tbl-head{display:table-header-group;}\n.tbl .tbl-body{display:table-row-group;}\n.tbl .tbl-foot{display:table-footer-group;}\n/*} end of media print */\n</style>\n</head>\n<body>\n\n<div class="tbl">\n<!-- I intentionally moved following (commented) block to the bottom\n to show that it appear at the top. For test purpose only ;) -->\n<!--<div class="tbl-head">\n<header>\n <h1><img src="//some_logo.jpg"/> 2016 Report</h1>\n</header>\n</div>-->\n<div class="tbl-body">\n<section>\n <!--your table here -->\n</section>\n</div>\n<div class="tbl-head"><!--this block will go up -->\n<header>\n <h1><img src="//some_logo.jpg"/> 2016 Report</h1>\n</header>\n</div>\n<div class="tbl-foot"><!--This block go to the bottom from any valid place inside .tbl -->\n<footer>\n <h3><img src="//some_image.jpg"/> 2016 \xc2\xa9 The report company</h3>\n</footer>\n</div>\n</div>\n</body>\n</html>\n- Google Chrome 存在已知错误 https://bugs.chromium.org/p/chromium/issues/detail?id=24826，该错误已有 8 年未修复。 (2认同)
| 归档时间： |
|
| 查看次数： |
8340 次 |
| 最近记录： |