抄来的关于CSS控制打印Table

最新推荐文章于 2025-10-06 06:35:25 发布
转载 最新推荐文章于 2025-10-06 06:35:25 发布 · 2.8k 阅读 · 0
文章标签：

#table #css #input #button #border

此博客展示了一个HTML表格的打印样式设置。通过CSS媒体查询，设置打印时隐藏输入框。表格有表头、表体和表尾，表头和表尾样式突出，每页都会显示，还设置了分页，同时提供打印按钮。

<style>
@media print{
INPUT {display:none}
}
</style>
<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()">




每页都有的表头



表格内容表格内容

表格内容表格内容

表格内容表格内容

表格内容表格内容

表格内容表格内容

表格内容表格内容

表格内容表格内容

表格内容表格内容

表格内容表格内容

表格内容表格内容

表格内容表格内容

表格内容表格内容

表格内容表格内容

表格内容表格内容

表格内容表格内容

表格内容表格内容

表格内容表格内容

表格内容表格内容

表格内容表格内容

表格内容表格内容

表格内容表格内容




每页都有的表尾




【学习方法】-【css+html】-【浏览器渲染】-【跨域】-【事件循环】-【v8引擎】-【内存原理】-【原型、原型链】-【this、Proxy、Reflect、WeakMap】-【js异步编程方案】
CaraYQ的博客
09-01 1304
总之，如果这个东西的执行是完全独立的，他不需要依赖dom，也不需要依赖于我们前面的js代码，这种东西我们可以手动加上async，并且将这个东西放在dom最后比较好，也就是说将async所在script标签放在body标签里的最后面。100px的div在不同设备展示的大小是一样的，只是分辨率高的展示的更细腻一点，否则我们需要根据不同的分辨率写不同的代码，根本没法开发，针对这这一问题，浏览器帮我们抽象出来了一个单位——逻辑像素。假如现在有两个设备，他们大小一样，分辨率分别为320。
最全面、最详细web前端面试题及答案总结
热门推荐
HanXiaoXi_yeal的博客
02-01 3万+
2021最全面、最详细web前端面试题及答案总结 总结不易，希望可以帮助到即将面试或还在学习中的web前端小伙伴，祝面试顺利，拿高薪！ 本章是HTML考点的⾮重难点，因此我们采⽤简略回答的⽅式进⾏撰写，所以不会有太多详细的解释。我们约定，每个问题后我们标记『✨ 』的为⾼频⾯试题 doctype的作⽤是什么？✨ DOCTYPE是html5标准⽹⻚声明，且必须声明在HTML⽂档的第⼀⾏。来告知浏览器的解析器⽤什么⽂档标准解析这个 ⽂档，不同的渲染模式会影响到浏览器对于 CSS 代码甚⾄ JavaScript
解决table边框在打印中不显示的问题
12-01 2483
先了解一下，table边框如何设置 一、只对表格table标签设置边框 只对table标签设置border（边框）样式，将让此表格最外层table一个边框，而表格内部不产生边框样式。CSS代码： .table-a table{border:1px solid #F00} HTML代码： <div class="tabl...
Element UI表格数据打印：Table打印输出方案
最新发布
gitblog_00438的博客
10-06 841
在后台管理系统开发中，经常需要将Element UI的Table组件数据导出为纸质文档或PDF。本文将介绍三种实用的Table打印方案，从基础实现到高级自定义，帮助开发者快速解决数据打印需求。 ## 方案对比与选择建议 | 方案 | 实现难度 | 兼容性 | 自定义程度 | 适用场景 | |------|----------|--------|------------|----------| ...
利用CSS样式打印
nedvedno1的专栏
11-12 2868
11.4  利用CSS样式打印利用CSS样式打印是经常使用的一种打印方法，利用它可以非常方便的实现打印页面中的指定内容和分页打印，下面将通过具体实例介绍如何利用CSS样式打印。实例302  利用CSS样式打印页面中的指定内容实例说明普通的Web打印，将会打印页面中的全部内容，但在开发实际网站时，通常只需要打印页面中指定的内容，为了解决该问题，可以应用CSS样式对打印内容进行控制。运
css print
web前端技巧开发
04-16 1565
最近做表单打印，遂整理了一些打印相关的内容。 说到网页打印，首先想到的便是@media查询（即网页css），通过使用媒体类型print即可解决实际应用的大多数问题，比如实现只打印网页的某部分内容，调整字体大小、修改布局等使打印出来的纸质文件更简洁明了。代码如下： @media print{ /*隐藏不打印的元素*/ .no-print{ display:no...
css 样式编写_为打印样式表编写CSS
cungui5726的博客
08-17 218
css 样式编写The focus of most web developers is designing web content for screen, a category that includes desktops, laptops and mobile devices. 大多数Web开发人员的重点是为屏幕设计Web内容，该内容包括台式机，笔记本电脑和移动设备。 As you prog...
table表格打印样式
weixin_34006965的博客
05-23 2452
Html中table的属性： border= “1”：给整个表格（包括表格及每一个单元格）加上1像素的黑色边框， 其等同于css中的：table,table tr th, table tr td { border:1px solid #0094ff; } cellpadding=“0”：单元格边距等于0，其默认值为1px， 其等同于css中的：{padding：0;} ce...
打印样式CSS的技巧和要点
Just Code
11-08 760
不经过任何处理而直接打印网站上的页面会得到一个不理想的效果。我们WEB开发人员可以简单的采用几个要点来使之达到较为合适的效果： 使用响应式布局设置打印的效果 打印背景图片和颜色，在合适的时候 添加显示的网址或页面链接，以供参考 使用css filter 提高打印的图形效果   针对打印的样式，而不是屏幕显示样式 首先，我们需要使用媒体查询（media query）针对 打...
EMOS邮件系统问题及解决方法【更新中】
Zonelan
10-23 6613
本文使用的EMOS版本为1.5 64bit  extmial 基于Centos release 5.3 定制系统，部署在IaaS私有云KVM虚拟机中，以下是部署与使用中遇到的问题及解决办法 一、更改WEB登录界面LOGO 1、替换 /var/www/extsuite/extmail/html/default/images/logo.gif 即可。 2、更改/var/www/ext
Laravel 课程自学笔记
BLOG
07-17 2202
安装配置安装composerwww.getcomposer.org www.phpcomposer.com bbs.houdunwang.com/thread-1009922-1-1.html composer.exe 一装到底，在第二步的时候选择php.exe 安装的位置 安装laravel 命令行下安装：在 cmd 命令行下，先cd 到安装位置： C:\Users\Admin
顺丰快递单模板html+css.zip
08-09
顺丰快递单模板html+css.zip 快递单模板，使用html+css+js实现，前端模板，数据可从后台获取并自己实现打印
【我的面试-01】Web前端开发实习岗-面试题总结
weixin_43906233的博客
04-14 4335
Web前端开发面试，一个没有实习经验的，正在苦学Vue的，考研下海的，被催回家考公务员的，还在赶论文的苦命孩子的一次面试经历，希望这篇文章能够给苦苦的寻找前端工作的同学提供一点点帮助。（面试题涉及HTML5、CSS3、JavaScript、ES6、Vue）
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
08-07 2232
对于有打印需求的网页，特别是文章的详情页，需要设置专门的打印样式来适配页面。CSS 打印样式允许你为网页设置专门用于打印的样式。文本就是专门介绍如何使用 CSS 打印样式为 Web 页面设置专业的打印机效果。
css对打印的支持
JAVA_HOME_NEW的博客
06-08 322
我们可以通过 链接两个外部样式来控制 页面打印时的样式 和 显示样式。 如： <link rel="stylesheet" href="lighthouse.css" media="screen"> <link rel="stylesheet" href="lighthouseprint.css" media="print"> 2.在移动设备上可以通过 <met...
关于打印样式CSS浅谈
ysds20211402的博客
04-28 410
转自：微点阅读https://www.weidianyuedu.com 不经过任何处理而直接打印网站上的页面会得到一个不理想的效果。 我们WEB开发人员可以简单采用几个要点来使之达到较为合适的效果： 使用响应式布局设置打印的效果 在合适的时候打印背景图片和颜色 添加显示的网址或页面链接，以供参考 使用css filter 提高打印的图形效果 针对打印的样式，而不是屏幕显示样式 首先，我们需要使用媒体查询（media query）针对打印样式设置。 1 2 3 @media p..
打印样式CSS的技巧和要点介绍
hdxx2022的博客
03-04 1289
另一方面即使人们只是偶尔需要打印的东西从网站，这将是理想的，如果页面设计适合的打印机，就像现代的网站适应各种屏幕尺寸和设备。从理论上讲，你可以使用一个CSS sprite 之间进行切换不同版本的打印的标志，但是这将意味着增加一倍的文件大小可能没有什么好处。重新针对打印写CSS样式是没有必要的，我们只需要针对差异设置打印的样式覆盖掉之前的默认样式。如果直接打印，超链接将只是一点文字，而不会出现链接的网址，这样来说，是没有意义的。链接周围图像是比较麻烦的，理想的情况是图像周围的链接将有一个class。
关于打印样式CSS的技巧和要点介绍
hdxx2022的博客
02-10 327
另一方面即使人们只是偶尔需要打印的东西从网站，这将是理想的，如果页面设计适合的打印机，就像现代的网站适应各种屏幕尺寸和设备。对于打印，大多数情况下我们不需要打印整个页面，只需要打印一个简洁的能够突出需要信息的页面，那么我们将不相关的部分隐藏掉（如：导航条、背景图片）。一个更好的解决方案是通过提供匹配的QR码的数字版本的页面更容易访问。重新针对打印写CSS样式是没有必要的，我们只需要针对差异设置打印的样式覆盖掉之前的默认样式。如果直接打印，超链接将只是一点文字，而不会出现链接的网址，这样来说，是没有意义的。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值