html怎么在表格中加入图片不显示不出来,解决table边框在打印中不显示的问题

aff9f72ce5e96a0c1bdf543372de9ae7.png

先了解一下,table边框如何设置

一、只对表格table标签设置边框

只对table标签设置border(边框)样式,将让此表格最外层table一个边框,而表格内部不产生边框样式。

ea6f42ce01e7d9491377ad7adae85c20.png

CSS代码:

[css].table-a table{border:1px solid #F00}

[/css]

HTML代码:

[html]

站名网址说明
web前端开发www.zjgsq.comweb前端学习之路
web前端开发www.zjgsq.comweb前端学习之路

[/html]

二、对td设置边框

对table表格td设置边框样式,表格对象内td将实现边框样式,但中间部分td会导致出现双边框。

b0ed6eedab83c3a502f28729df5e0465.png

CSS代码:

[css].table-b table td{border:1px solid #F00}

[/css]

HTML代码:

[html]

站名网址说明
web前端开发www.zjgsq.comweb前端学习之路
web前端开发www.zjgsq.comweb前端学习之路

[/html]

三、对table和td设置背景,实现表格边框

先设置table css背景为红色, 再设置table单元之间间距为1。

此方法在web中显示表格边框虽然不错,但是在打印时表格的边框就没有了,因为一般默认chrome也好,IE也好,打印默认设置都是不显示背景颜色和图片的,需要自己手动设置显示,不是每个打印网页的人都知道如何去设置显示背景颜色和图片,所以我们要用到方法四

2a931019458d448effea376c28a179d9.png

CSS代码:

[css].table-c table{ background:#F00}

.table-c table td{ background:#FFF}

[/css]

HTML代码:

[html]

站名网址说明
web前端开发www.zjgsq.comweb前端学习之路
web前端开发www.zjgsq.comweb前端学习之路

[/html]

四、完美表格边框

对table与td 分别设置1像素的边框,再对边框进行合并,此方法无论在web或打印都能显示出来

a9ae999b94867274ddc050d6ab62211b.png

CSS代码:

[css].table-d table{border:1px solid #F00;border-collapse: collapse}

.table-d table td{border:1px solid #F00;}

[/css]

HTML代码:

[html]

站名网址说明
web前端开发www.zjgsq.comweb前端学习之路
web前端开发www.zjgsq.comweb前端学习之路

[/html]

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值