web打印table,每页都显示表头

最新推荐文章于 2024-06-06 17:25:14 发布
最新推荐文章于 2024-06-06 17:25:14 发布
阅读量6.8k 收藏 1
点赞数
分类专栏： JAVA HTML 文章标签： web table打印
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lee4755026/article/details/57406595
版权
JAVA 同时被 2 个专栏收录
18 篇文章 0 订阅
订阅专栏
HTML
3 篇文章 0 订阅
订阅专栏 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    <html>

    <head>

    <meta http-equiv="Content-Type" c>

    <title>test</title>

    <style>

    @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>表格内容</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>表格内容</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>表格内容</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="window.print（）">

    </body>

    </html>

我的项目里页面用的是jsp，调了很长时间，还是不能实现每页都有表头的功能，后来灵感一现，把文件后缀改成了html，然后就ok了。
如果想实现这样的功能，也许不止一种方法，直接在页面里输出多个表头，按每页需要打印的内容排好版，应该也能实现这个的功能的，有时间了测试一下。

无谓生活
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ASP.NET基础教程-DataGrid表格控件-打印时让指定每一页的记录数量,并且每页都打印表格的标头...
weixin_33851429的博客
10-11 134
public static int _pageSize=15; public static string _header; /// <summary> /// 传入DataGrid的引用和每页记录数,让DataGrid在打印时分页显示 /// </summary> /// <param name=“grid”>要打印的Data...
table thead tfoot 分页，每页显示表头 表尾
qb170217的博客
07-16 1166
test-page.html <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>验收单</title> <style> * { margin: 0; p
原生js 实现table 打印
最新发布
weixin_44185995的博客
06-06 251
原生js 实现table打印
html打印分页自带表头表尾
01-15
需要自己写打印程序时，会遇到打印分页都需有表头表尾的问题，html打印分页自带表头表尾，可以参考学习下
打印表格每页都有表头
lu1974451304的博客
07-29 311
【代码】打印表格每页都有表头。
html打印table，分页时每页都有表头，表头的高度和行数有限制吗
期待变成大神的博客
07-14 854
当表头有5行时，分页正常，如下图 当表头有6行时，分页时第二有人就没有表头了，如下图 把其中一行删掉，或者内容置空就是正常的，这是行数有限制吗？望大神们不吝赐教
每页都有的表头和打印分页
weixin_30611509的博客
12-12 452
本文转自：http://www.cnblogs.com/RitchieChen/archive/2008/07/30/1256829.html 在做项目的时候碰到的。用户要求，页面呈现太长时，打印的时候，要求，每页上都要有表头。找了好久，才在网上找到。原来，是要对每个表格，定义其thead，并对其样式设置成：style="display:table-header-group"。如...
html分页显示标题,在分页符后显示当前表格标题html
weixin_39585070的博客
06-11 381
如何在动态表中断点后显示pagepbreak(在打印预览模式下)发生的当前表头？所以，如果这是我的表和分页符第二集后发生......Head Cell 1aHead Cell 2aHead Cell 3aCell 1aCell 2aCell 3aCell 4aCell 5aCell 6aHead Cell 1bHead Cell 2bHead Cell 3bCell 1bCell 2bCell 3...
Web分页打印 细线表格+分页打印之终极攻略
09-28
在Web开发中，分页打印是一项重要的功能，尤其在处理大量数据...4. 在`<thead>`中设置`display: table-header-group`以保证每页都有表头。 遵循这些步骤，你可以创建一个既美观又实用的分页打印表格，满足客户的需求。
Peach-Printer Web 打印控件
04-20
html元素在打印时控件可根据尺寸进行分页，其他元素则会在每页重复显示。 js代码与打印控件交互使用http协议，网页通过向本地控件发送post请求，调用控件打印。 说明文档：https://ctxb2004.gitee.io/peach-printer/
EXCEL导入页面TABLE
03-16
在Web前端开发中，数据可视化是关键部分，而将Excel导入转化为页面TABLE展示是一种常见需求。理解并掌握上述流程，能够帮助开发者有效地实现这一功能，提升Web应用的实用性和用户体验。同时，对于数据的处理和展示，...
js excel表内容导入到页面table中
10-10
在JavaScript（JS）开发中，有时我们需要从Excel文件中读取数据并将其显示在网页的HTML表格（table）中。这个过程通常涉及到几个关键步骤，包括文件读取、数据解析和表格渲染。以下是对这个过程的详细解释： 1. **...
页面表头排序
05-25
可以为每个表头设置一个CSS类，以显示当前的排序状态。同时，点击表头时，根据当前排序列是否相同，切换升序或降序。 ```javascript let currentSortColumn = null; let isAscending = true; function ...
网页打印，强制分页并为每一页添加标题，为每一页添加表头
qq_45380371的博客
05-07 1820
首先，用到是react中的tinper中的组件表，实现的表格，发现要想实现当前页面内容占满时，自动换页，并在下一页中增加标题和表头。因为这个组件是封装的，你取不到啥时候要分页的值的地方。后来用原始的table,tr,td进行编辑，虽然获取到了要分页的地方，并为加上分页。但是加上标题，这个标题还是在table中，这样样式就不行了。最后有用其他办法，ul，li，和ul的样式display:inline...
html打印表格每页都有的表头和打印分页
热门推荐
anihasiyou的专栏
12-15 1万+
本文转载：http://www.cnblogs.com/RitchieChen/archive/2008/07/30/1256829.html  在做项目的时候碰到的。用户要求，页面呈现太长时，打印的时候，要求，每页上都要有表头。找了好久，才在网上找到。原来，是要对每个表格，定义其thead，并对其样式设置成：style="display:table-header-group"。如果要求有表
html表格表头 表主题 表尾,HTML表格标记教程(46):表格的表尾标记
weixin_34943809的博客
06-04 725
HTML表格标记教程(46):表格的表尾标记互联网 发布时间：2008-10-17 18:56:56 作者：佚名 我要评论标记用于定义表尾的样式。基本语法语法解释align代表水平对齐，其中Left为居左，Center为居中，Right为居右。valign代表垂直对齐，Top为居上，Middle为居中，Bottom为居下。标记用于定义表尾的样式。基本语法语法解释align代表水平对齐...
jqprint 分页打印_jQuery打印Html页面自动分页
weixin_32531655的博客
12-29 1139
最近项目中需要用到打印HTML页面，需要指定区域打印，使用jquery.PrintArea.js 插件用法：Javascript代码 $("div#printmain").printArea();但还是会打印DIV后面的内容，这里可以使用CSS控制打印分页Css代码 有时用CSS控制分页了但还是会连续打印页面，这里就可以用上PrintArea 插件中的属性参数。PrintArea部分源码：Ja...
打印 公共表头和表尾部分
Knight_Key的博客
03-20 1142
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312"&gt; &lt;title&gt;无
jqprint 每页输出表头
12-23
根据你提供的引用内容，你可以使用jqprint插件来实现每页都有表头的功能。具体步骤如下： 1. 首先，确保你已经引入了jQuery和jqprint插件的库文件。 2. 在页面中，使用HTML和CSS创建一个包含表格的容器，并设置好表格的样式。 3. 在表格中，将表头部分放在<thead>标签中，将数据部分放在<tbody>标签中。 4. 使用JavaScript代码调用jqprint插件的print方法，将表格打印到每一页。 下面是一个示例代码： ```html <!DOCTYPE html> <html> <head> <title>Print Table with Header on Each Page</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqprint/0.3/jquery.jqprint.min.js"></script> <style> table { width: 100%; border-collapse: collapse; } th, td { border: 1px solid black; padding: 8px; } </style> </head> <body> <table> <thead> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> </thead> <tbody> <tr> <td>Data 1</td> <td>Data 2</td> <td>Data 3</td> </tr> <!-- more rows --> </tbody> </table> <script> $(document).ready(function() { $('table').jqprint(); }); </script> </body> </html> ``` 这段代码会在每一页打印时都包含表头。你可以根据自己的需求修改表格的内容和样式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值