解决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>
转载自:http://www.w3cways.com/1493.html
程序员的基础教程:菜鸟程序员
解决table边框在打印中不显示的问题的更多相关文章
- 解决PowerShell命令行窗口中不显示光标的问题
不知道什么原因,在有些系统上打开PowerShell命令行窗口后,光标无法显示.这种情况在Windows Server 2008/2012.Windows 8/9/10上都出现过,估计是由于某些系统软 ...
- Table边框使用总结 ,只显示你要显示的边框
表格的常用属性 基本属性有:width(宽度).height(高度).border(边框值).cellspacing(表格的内宽,即表格与tr之间的间隔). cellpadding(表格内元素的间隔, ...
- 解决Windows照片查看器中图片显示发黄的问题
这其实是ICC颜色配置的问题,发生在Windows7自动更新下载了显示器的驱动后,自动安装后显示器的颜色配额制文件自动改为新下载的配置,导致显卡和显示器颜色配置不兼容的问题,不过不用担心,非常容易解决 ...
- HTML中table边框的显示总结
一.1.显示表格的4个边框:<table border frame=box>2.只显示上边框: <table border frame=above>3.只显示下边框: < ...
- html table表格导出excel的方法 html5 table导出Excel HTML用JS导出Excel的五种方法 html中table导出Excel 前端开发 将table内容导出到excel HTML table导出到Excel中的解决办法 js实现table导出Excel,保留table样式
先上代码 <script type="text/javascript" language="javascript"> var idTmr; ...
- table边框不显示
今日在做报表的时候发现,最后一行隐藏后整个报表的下边框会不显示,猜测是td的边框隐藏后但table并未设置边框,导致下边框没有出现.因此设置了table边框后问题解决.table和td的边框关系如下实 ...
- Table 组件构建过程中遇到的问题与解决思路
在 GearCase 开源项目构建 Table 组件的过程中.遇到了各式各样的问题,最后尝试了各种方法去解决这些问题. 遇到的部分问题 checkbox 的全选和半选问题 table 组件的排序请求方 ...
- 借助JavaScript中的Dom属性改变Html中Table边框的颜色
借助JavaScript中的Dom属性改变Html中Table边框的颜色 -------------------- <html> <head> <title>我是页 ...
- 借助JavaScript中的时间函数改变Html中Table边框的颜色
借助JavaScript中的时间函数改变Html中Table边框的颜色 <html> <head> <meta http-equiv="Content-Type ...
随机推荐
- 关于angular的好文推荐
独立作用域篇 1)http://www.angularjs.cn/A09C 2)http://www.cnblogs.com/wangmeijian/p/4944030.html 理解$watch , ...
- JS 实现关闭浏览器
$('#exitSystem').on('click',function(){ if(confirm("确定要退出系统并关闭浏览器吗?")){ //关闭浏览器的方法只适用i ...
- NoSQL v.s. RDB
RDB 相对于 NoSQL 的劣势: 1. 集中式单点架构 2. 固定的数据模型: 可扩展性差,缺乏处理半结构化和非结构化数据的能力. 3. 扩容成本高:处理海量数据时存在性能瓶颈,大数据时代的存储需 ...
- 【转】Jmeter使用之常用函数介绍
"_csvRead"函数 csvRead函数是从外部读取参数,csvRead函数可以从一个文件中读取多个参数. 下面具体讲一下如何使用csvread函数: 1.新建一个csv或者t ...
- [Java][Web]ServletContext 方法的应用
由于一个 Web 应用中的所有 Servlet 共享同一个 ServletContext 对象,所以多个 Servlet 通过 ServletContext 对象实现数据共享. ServletCont ...
- 数据运算+-*/,比较运算符==!=,赋值运算,逻辑运算and,or,not,成员运算in,not in,身份运算is is not,位运算&|,运算符的优先级
取模就是返回余数. 取模的作用主要是来取奇偶数来用的,奇数干嘛,偶数干嘛. 比较运算符: 赋值运算: 逻辑运算: 赋值的时候可以多个变量同时赋值 成员运算: in就是在不在的意思. 身份运算: 位运算 ...
- linux下echo命令详解
linux的echo命令, 在shell编程中极为常用, 在终端下打印变量value的时候也是常常用到的, 因此有必要了解下echo的用法 例如: echo $JAVA_HOME /export/se ...
- java 检测代理IP是否准确
我这里提供2个方法都可以实现:第一个是createIPAddress()和convertStreamToString() import java.io.IOException; import java ...
- 【BZOJ】1008: [HNOI2008]越狱(组合数学)
题目 题目描述 监狱有连续编号为1...N的N个房间,每个房间关押一个犯人,有M种宗教,每个犯人可能信仰其中一种.如果相邻房间的犯人的宗教相同,就可能发生越狱,求有多少种状态可能发生越狱 输入输出格式 ...
- md5加密(3)---org.apache.commons.codec.digest.DigestUtils.md5Hex(input)
import org.apache.commons.codec.digest.DigestUtils;String sig = DigestUtils.md5Hex("str")