解决table边框在打印中不显示的问题 (转)

转载：转载请注明来源：
Web前端(W3Cways.com) - Web前端学习之路

»

解决table边框在打印中不显示的问题

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

一、只对表格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>

AD：****【chrome二维码插件】w3cways QR Code Generator