html表格打印边框不全,解决table边框在打印中不显示的问题 (转) | 您所在的位置:网站首页 › 怎样打印出来表格边框 › html表格打印边框不全,解决table边框在打印中不显示的问题 (转) |
» 先了解一下,table边框如何设置 一、只对表格table标签设置边框 只对table标签设置border(边框)样式,将让此表格最外层table一个边框,而表格内部不产生边框样式。 CSS代码: .table-a table{border:1px solid #F00} HTML代码: 站名网址说明web前端开发www.zjgsq.comweb前端学习之路web前端开发www.zjgsq.comweb前端学习之路二、对td设置边框 对table表格td设置边框样式,表格对象内td将实现边框样式,但中间部分td会导致出现双边框。 CSS代码: .table-b table td{border:1px solid #F00} HTML代码: 站名网址说明web前端开发www.zjgsq.comweb前端学习之路web前端开发www.zjgsq.comweb前端学习之路三、对table和td设置背景,实现表格边框 先设置table css背景为红色, 再设置table单元之间间距为1。 此方法在web中显示表格边框虽然不错,但是在打印时表格的边框就没有了,因为一般默认chrome也好,IE也好,打印默认设置都是不显示背景颜色和图片的,需要自己手动设置显示,不是每个打印网页的人都知道如何去设置显示背景颜色和图片,所以我们要用到方法四 CSS代码: .table-c table{ background:#F00} .table-c table td{ background:#FFF} HTML代码: 站名网址说明web前端开发www.zjgsq.comweb前端学习之路web前端开发www.zjgsq.comweb前端学习之路四、完美表格边框 对table与td 分别设置1像素的边框,再对边框进行合并,此方法无论在web或打印都能显示出来 CSS代码: .table-d table{border:1px solid #F00;border-collapse:collapse;} .table-d table td{border:1px solid #F00;} HTML代码: 站名网址说明web前端开发www.zjgsq.comweb前端学习之路web前端开发www.zjgsq.comweb前端学习之路 |
CopyRight 2018-2019 实验室设备网 版权所有 |