chrome 打印 table border边框 已经隐藏,打印仍显示?
<table class="table table-responsive table-bordered noticeTable" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="tableWidth20">编号</td>
<td class="tableWidth20"></td>
<td rowspan="2" class="tableWidth20 vertical">地点</td>
<td class="tableWidth20"></td>
<td class="tableWidth20"></td>
</tr>
<tr>
<td>名称</td>
<td></td>
<td>地名</td>
<td></td>
</tr>
<tr>
<td>所属</td>
<td colspan="2"></td>
<td>所属</td>
<td></td>
</tr>
<tr>
<td colspan="5" class="alignLeft noBottomBorder">整改建议:</td>
</tr>
<tr>
<td colspan="5" class="height36 noTopBorder noBottomBorder"></td>
</tr>
<tr>
<td colspan="5" class="height36 noTopBorder noBottomBorder"></td>
</tr>
<tr>
<td colspan="5" class="noTopBorder noBottomBorder">请务必于______年_____月_____日以前将整改结果上报。</td>
</tr>
</tbody>
</table>
.tableWidth20 {
width: 20%;
}
.noTopBorder {
border-top: none;
}
.noBottomBorder {
border-bottom: none;
}
.vertical {
vertical-align: middle;
}
页面效果如下:
用js原生print方法打印,或页面右键打印
打印效果如下:
最后一个大表格中的横线在页面中已经用border:none;
隐藏掉,但是打印仍然出现,试了很多种办法,目前没找到解决办法.
有知道原因的或解决方案的,请告知,不胜感激 *
你的页面展示效果和打印可以定义为完全不同的样式,比如这样:
放一下对比图:
一些细节参考这个: https://segmentfault.com/a/11...
以及 MDN:https://developer.mozilla.org...