先了解一下,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边框在打印中不显示的问题的更多相关文章

  1. 解决PowerShell命令行窗口中不显示光标的问题

    不知道什么原因,在有些系统上打开PowerShell命令行窗口后,光标无法显示.这种情况在Windows Server 2008/2012.Windows 8/9/10上都出现过,估计是由于某些系统软 ...

  2. Table边框使用总结 ,只显示你要显示的边框

    表格的常用属性 基本属性有:width(宽度).height(高度).border(边框值).cellspacing(表格的内宽,即表格与tr之间的间隔). cellpadding(表格内元素的间隔, ...

  3. 解决Windows照片查看器中图片显示发黄的问题

    这其实是ICC颜色配置的问题,发生在Windows7自动更新下载了显示器的驱动后,自动安装后显示器的颜色配额制文件自动改为新下载的配置,导致显卡和显示器颜色配置不兼容的问题,不过不用担心,非常容易解决 ...

  4. HTML中table边框的显示总结

    一.1.显示表格的4个边框:<table border frame=box>2.只显示上边框: <table border frame=above>3.只显示下边框: < ...

  5. 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; ...

  6. table边框不显示

    今日在做报表的时候发现,最后一行隐藏后整个报表的下边框会不显示,猜测是td的边框隐藏后但table并未设置边框,导致下边框没有出现.因此设置了table边框后问题解决.table和td的边框关系如下实 ...

  7. Table 组件构建过程中遇到的问题与解决思路

    在 GearCase 开源项目构建 Table 组件的过程中.遇到了各式各样的问题,最后尝试了各种方法去解决这些问题. 遇到的部分问题 checkbox 的全选和半选问题 table 组件的排序请求方 ...

  8. 借助JavaScript中的Dom属性改变Html中Table边框的颜色

    借助JavaScript中的Dom属性改变Html中Table边框的颜色 -------------------- <html> <head> <title>我是页 ...

  9. 借助JavaScript中的时间函数改变Html中Table边框的颜色

    借助JavaScript中的时间函数改变Html中Table边框的颜色 <html> <head> <meta http-equiv="Content-Type ...

随机推荐

  1. 关于angular的好文推荐

    独立作用域篇 1)http://www.angularjs.cn/A09C 2)http://www.cnblogs.com/wangmeijian/p/4944030.html 理解$watch , ...

  2. JS 实现关闭浏览器

        $('#exitSystem').on('click',function(){ if(confirm("确定要退出系统并关闭浏览器吗?")){ //关闭浏览器的方法只适用i ...

  3. NoSQL v.s. RDB

    RDB 相对于 NoSQL 的劣势: 1. 集中式单点架构 2. 固定的数据模型: 可扩展性差,缺乏处理半结构化和非结构化数据的能力. 3. 扩容成本高:处理海量数据时存在性能瓶颈,大数据时代的存储需 ...

  4. 【转】Jmeter使用之常用函数介绍

    "_csvRead"函数 csvRead函数是从外部读取参数,csvRead函数可以从一个文件中读取多个参数. 下面具体讲一下如何使用csvread函数: 1.新建一个csv或者t ...

  5. [Java][Web]ServletContext 方法的应用

    由于一个 Web 应用中的所有 Servlet 共享同一个 ServletContext 对象,所以多个 Servlet 通过 ServletContext 对象实现数据共享. ServletCont ...

  6. 数据运算+-*/,比较运算符==!=,赋值运算,逻辑运算and,or,not,成员运算in,not in,身份运算is is not,位运算&|,运算符的优先级

    取模就是返回余数. 取模的作用主要是来取奇偶数来用的,奇数干嘛,偶数干嘛. 比较运算符: 赋值运算: 逻辑运算: 赋值的时候可以多个变量同时赋值 成员运算: in就是在不在的意思. 身份运算: 位运算 ...

  7. linux下echo命令详解

    linux的echo命令, 在shell编程中极为常用, 在终端下打印变量value的时候也是常常用到的, 因此有必要了解下echo的用法 例如: echo $JAVA_HOME /export/se ...

  8. java 检测代理IP是否准确

    我这里提供2个方法都可以实现:第一个是createIPAddress()和convertStreamToString() import java.io.IOException; import java ...

  9. 【BZOJ】1008: [HNOI2008]越狱(组合数学)

    题目 题目描述 监狱有连续编号为1...N的N个房间,每个房间关押一个犯人,有M种宗教,每个犯人可能信仰其中一种.如果相邻房间的犯人的宗教相同,就可能发生越狱,求有多少种状态可能发生越狱 输入输出格式 ...

  10. md5加密(3)---org.apache.commons.codec.digest.DigestUtils.md5Hex(input)

    import org.apache.commons.codec.digest.DigestUtils;String sig = DigestUtils.md5Hex("str")