解决table边框在打印中不显示的问题
2014-04-23 00:00
351 查看
先了解一下,table边框如何设置
一、只对表格table标签设置边框
只对table标签设置border(边框)样式,将让此表格最外层table一个边框,而表格内部不产生边框样式。
CSS代码:
HTML代码:
二、对td设置边框
对table表格td设置边框样式,表格对象内td将实现边框样式,但中间部分td会导致出现双边框。
CSS代码:
HTML代码:
三、对table和td设置背景,实现表格边框
先设置table css背景为红色, 再设置table单元之间间距为1。
此方法在web中显示表格边框虽然不错,但是在打印时表格的边框就没有了,因为一般默认chrome也好,IE也好,打印默认设置都是不显示背景颜色和图片的,需要自己手动设置显示,不是每个打印网页的人都知道如何去设置显示背景颜色和图片,所以我们要用到方法四
CSS代码:
HTML代码:
四、完美表格边框
对table与td 分别设置1像素的边框,再对边框进行合并,此方法无论在web或打印都能显示出来
CSS代码:
HTML代码:
一、只对表格table标签设置边框
只对table标签设置border(边框)样式,将让此表格最外层table一个边框,而表格内部不产生边框样式。
CSS代码:
.table-a table{border:1px solid #F00}
HTML代码:
<div class="table-a"> <table width="400" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td width="105">站名</td> <td width="181">网址</td> <td width="112">说明</td> </tr> <tr> <td>web前端开发</td> <td>www.zjgsq.com</td> <td>web前端学习之路</td> </tr> <tr> <td>web前端开发</td> <td>www.zjgsq.com</td> <td>web前端学习之路</td> </tr> </tbody> </table> </div>
二、对td设置边框
对table表格td设置边框样式,表格对象内td将实现边框样式,但中间部分td会导致出现双边框。
CSS代码:
.table-b table td{border:1px solid #F00}
HTML代码:
<div class="table-b"> <table width="400" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td width="105">站名</td> <td width="181">网址</td> <td width="112">说明</td> </tr> <tr> <td>web前端开发</td> <td>www.zjgsq.com</td> <td>web前端学习之路</td> </tr> <tr> <td>web前端开发</td> <td>www.zjgsq.com</td> <td>web前端学习之路</td> </tr> </tbody> </table> </div>
三、对table和td设置背景,实现表格边框
先设置table css背景为红色, 再设置table单元之间间距为1。
此方法在web中显示表格边框虽然不错,但是在打印时表格的边框就没有了,因为一般默认chrome也好,IE也好,打印默认设置都是不显示背景颜色和图片的,需要自己手动设置显示,不是每个打印网页的人都知道如何去设置显示背景颜色和图片,所以我们要用到方法四
CSS代码:
.table-c table{ background:#F00} .table-c table td{ background:#FFF}
HTML代码:
<div class="table-c"> <table width="400" border="0" cellspacing="1" cellpadding="0"> <tbody> <tr> <td width="105">站名</td> <td width="181">网址</td> <td width="112">说明</td> </tr> <tr> <td>web前端开发</td> <td>www.zjgsq.com</td> <td>web前端学习之路</td> </tr> <tr> <td>web前端开发</td> <td>www.zjgsq.com</td> <td>web前端学习之路</td> </tr> </tbody> </table> </div>
四、完美表格边框
对table与td 分别设置1像素的边框,再对边框进行合并,此方法无论在web或打印都能显示出来
CSS代码:
.table-d table{border:1px solid #F00;border-collapse: collapse} .table-d table td{border:1px solid #F00;}
HTML代码:
<div class="table-d"> <table width="400" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td width="105">站名</td> <td width="181">网址</td> <td width="112">说明</td> </tr> <tr> <td>web前端开发</td> <td>www.zjgsq.com</td> <td>web前端学习之路</td> </tr> <tr> <td>web前端开发</td> <td>www.zjgsq.com</td> <td>web前端学习之路</td> </tr> </tbody> </table> </div>
相关文章推荐
- 解决table边框在打印中不显示的问题
- 解决table中没内容边框不显示的问题 .
- css解决table中无内容边框显示不出来的问题
- 解决table中无内容边框显示不出来的问题
- 解决 通过继承QAbstractTableModel并实现headerData方法给QTableView添加标题时,标题不显示 的问题
- 解决Linux 下qt QGroupbox 边框不显示问题
- 解决android4.0后版本EditText边框不全显示的问题
- table中tr的display:block显示布局错乱问题解决方法
- table中边框在firefox中不显示的问题
- 关于IE打印预览内容显示不全的问题解决
- 如何解决关于TableView里面cell随机显示的问题
- 如何解决关于TableView里面cell随机显示的问题
- 解决android4.0后版本EditText边框不全显示的问题
- 如何解决关于TableView里面cell随机显示的问题
- [html5入门-10]解决设置了float了的子元素的父级边框和背景不显示的问题
- 解决iOS打印数组和字典中文显示异常问题
- table表格合并列的问题,在IE中能够正常显示,但是在火狐中,好像colspan没有起作用一样,解决办法!!!!
- 对table的tr使用display:block显示colspan失效问题的解决
- Jasperreports+jaspersoft studio学习教程(三)- 解决打印pdf中文不显示问题
- 解决extjs4.1官方例子kitchensink中TABle标题不能正常显示的问题