OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

用网页table thead tfoot元素完美控制页眉页脚显示内容打印的简单方式


分享到


分类 编程技巧   关键字 前端   发布 newghost  1557673865722
注意 转载须保留原文链接,译文链接,作者译者等信息。  
目前对于网页的页眉页脚打印方面,浏览器还有很大的不足。之前可能有一些 借助css固定fixed位置或 flexlayout 的解决方案,但是效果都不太理想。

但在最近chrome对table打印的更新中,增加了对 <thead> <tfoot> <th> 等元素的优化支持,表格中的标题和内容会被截断的问题解决了。 其实我们可以用这个特性来简单地实现页眉页脚的打印。





这是网页中HTML元素与打印的简单对应关系:

 ______________________
|        thead                                |  页眉
|______________________|
|                                                  |
|                                                  |  内容
|        tbody                                |
|                                                  |
|                                                  |
|______________________|
|        tfoot                                  |  页脚
|______________________|

HTML代码示例:

<table class="table table-print">
  <thead>
    <tr>
      <th colspan="2"><h1>这是页头?</h1></th>
    </tr>
    <tr>
      <th>列1</th>
      <th>列2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>FOX JUMP A RIVER</td>
      <td>GO AWAY</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2"><h3>这是页脚</h3></td>
    </tr>    
  </tfoot>
</table>

生产环境中测试的效果:



目前用Chrome打印时发现的一些问题:

1) 只有当table的内容超过一页时 thead 和 tfoot 才会起作用。
2) 当内容比一页纸短时,tfoot中的内容并不会显示在页面最下方。
3) 当有很多页时最后一页的tfoot也不会显示在页面最下方页脚位置

总体来说,效果比之前已经好很多,都还可以接受。网页上已经基本能够实现和打印机软件差不多的效果.

社区评论 ( Beta版 )
OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. 配置TinyMCE网页文本编辑器不显示html head body等标签信息
  2. Node.JS中用concat和push连接两个或多个数组的性能比较
  3. jQuery用$.prop,$.attr方法来获取或设置checkbox当前选中状态
  4. 判断是否为对象typeof abc == 'object' 与 instanceof 性能比较
  5. JavaScript中将字符串true或false转换成Boolean类型
  6. jQuery用outterHtml获取相对innerHTML父一级包含其自身的html代码内容
  7. 微服务运维难维护?数据基础架构公司Segment宣布放弃微服务构架
  8. 用 OnceAir 搭建个人Git/Svn/照片备份服务器,每年电费7块钱

 相关阅读 - 编程技巧
  1. css去掉table的td单元格的间距cellspacing,设置隔行显示不同背景颜色
  2. 用纯CSS改变html radio/checkbox默认背景颜色样式
  3. Node.JS命令行或批处理中更改Linux用户密码
  4. 用CSS和Bootstrap图标制作上下跳动的指示箭头动画效果
  5. 用css禁用input、checkbox、select等html控件,实现disable效果
  6. 用纯CSS停止冒泡和阻止浏览器默认行为及事件响应,达到禁用(disable)的目的
  7. Node.js框架之express
  8. 纽约时报使用Html5 WebRTC记录访问者IP地址
  9. 在Debian/Ubuntu上面安装升级nginx到最新版
  10. 编写高性能HTML网页应用

 关键字 - 前端
  1. 5个经典的前端面试问题
  2. 用网页table thead tfoot元素完美控制页眉页脚显示内容打印的简单方式
  3. jQuery用outterHtml获取相对innerHTML父一级包含其自身的html代码内容
  4. 15个最好的HTML5前端响应式框架(2014)
  5. 用纯CSS改变html radio/checkbox默认背景颜色样式
  6. 配置TinyMCE网页文本编辑器不显示html head body等标签信息
  7. AngularJS在大型单页面应用中的性能优化(一)
  8. css去掉table的td单元格的间距cellspacing,设置隔行显示不同背景颜色
  9. 用JavaScript实现basename获取路径中的文件名
  10. CSS垂直水平完全居中手册

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号