1.table上设边框,td上设边框:

<style>
table{border-right:1px solid #F00;border-bottom:1px solid #F00}
table td{border-left:1px solid #F00;border-top:1px solid #F00}
/*
如果对table和td都设置了全边框,则中间的td与td之间就出现了双边框
只对table td设置左与上边框;
对table设置右与下边框;
*/
</style>

2.table上设边框,td上不设边框

<style>
table{border:1px solid #F00;border-collapse: collapse;}
/*
利用table的border,bordercolor="#a0c6e5"实现table的边框,
但是此时的边框太粗,这时就可以用到style属性里的border-collapse:collapse,
border-collapse 属性设置表格的边框是否被合并为一个单一的边框
*/
</style>

3.在table上不设边框,td上设边框

<style>
table{border:none;border-collapse:collapse;}
table td{border:1px solid #F00;}
/*
单设td的边框,中间会的td与td中间的边框会出现双边框,此时需要设置
border-collapse:collapse;属性合并边框
*/
</style>

4.在table上设边框,不合并边框

<table border="1" cellspacing="0" cellpadding="0">
/*
cellpadding=“0”:单元格边距等于0,其默认值为1px,等同于css中的:{padding:0;}
cellspacing="0":单元格间距等于0,其默认值为2px,等同于css中的:border-collapse: collapse(边框合并),
但又不完全相同,cellspacing仅间距,而border-collapse使临近的边线合并成一条边线,
也就避免了cellspacing中边线重合造成边线加粗的问题。所以在这里不提倡使用html属性设置表格边框时将cellspacing设置为0,
如果你希望他等于0,更提倡使用css样式属性的方法去设置表格的边框,并使用border-collapse: collapse去合并边线,
而不是将cellspacing设置为0,造成重合边线加粗的问题
*/

  

css table-border的更多相关文章

  1. css+table

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 重温CSS:Border属性

    边界是众所周知的,有什么新的东西吗?好吧,我敢打赌,在这篇文章中,有很多你不看永远不知道的东西! 不仅可以用CSS3来创建圆角,使用原有CSS一样可以显示自定义图形.这是正确的(有待考究):在过去,没 ...

  3. css table 布局

    使用CSS表格 CSS表格能够解决所有那些我们在使用绝对定位和浮动定位进行多列布局时所遇到的问题.例如,“display:table;”的CSS声明能够让一个HTML元素和它的子节点像table元素一 ...

  4. table border

    table的CSS为{border-collapse:collapse;border:none;},再设置td的CSS为{border:solid#000 1px;}是一个非常不错的方法. 示例: & ...

  5. CSS Table(表格)

    CSS Table(表格) 一.表格边框 border 指定CSS表格边框,使用border属性. 下面的例子指定了一个表格的Th和TD元素的黑色边框: table, th, td { border: ...

  6. css Table布局:基于display:table的CSS布局

    两种类型的表格布局 你有两种方式使用表格布局 -HTML Table(<table>标签)和CSS Table(display:table 等相关属性). HTML Table是指使用原生 ...

  7. 通过CSS的border绘制三角形

    通过css的border 可以绘制出三角形, 不同的样式组合,有着不同的效果,可以控制它的大小,颜色,方向.看下面各种图形,相信可能还有很多图形,大家都没见过. 先写出公共的样式: .border { ...

  8. CSS 的 border 样式

    制作过网页的人都有为画线而烦恼的经历,先来认识一下“Border”(画边框),它是CSS的一个属性,用它可以给能确定范围的HTML标记(如TD.DIV等等)画边框,它可以定义边框线的类型.宽度和颜色, ...

  9. 利用css的border实现画三角形思路原理

    1.利用Css 的border绘制三角形的原理: div的border是有宽度和颜色的,当div的宽度比较大的时候,比如上面代码每个边100像素,颜色又不一样,浏览器怎么渲染颜色呢?经测试发现,宽度较 ...

  10. css table之合并单元格

    colspan 是合并列,rowspan是合并行,合并行的时候,比如rowspan="2",它的下一行tr会少一列:合并列的时候 colspan="2",此行的 ...

随机推荐

  1. vue-cli脚手架搭建

    我们使用vue-cli来搭建整个项目,vue-cli就是一个脚手架,步骤很简单,输入几个命令之后就会生成整个项目,里面包括了webpack.ESLint.babel很多配置等等,省了很多事 Vue+ ...

  2. UML之Enterprise Architect使用

    版权声明:若无来源注明,Techie亮博客文章均为原创. 转载请以链接形式标明本文标题和地址: 本文标题:UML之Enterprise Architect使用     本文地址:http://tech ...

  3. 自己编写 Oracle 分页函数

    CREATE OR REPLACE PACKAGE PACK_PAGINATION AS PAGESIZE CONSTANT ; TYPE TYRECORD_EMP IS RECORD( EMPNO ...

  4. [转帖] 部分收费的Oracle JDK VS 完全免费的OpenJDK

    来源: http://www.flammulina.com/2018/10/28/%E9%83%A8%E5%88%86%E6%94%B6%E8%B4%B9%E7%9A%84oracle-jdk-vs- ...

  5. excel copy cell & batch operation & checkbox

    excel copy cell & batch operation & checkbox excel 右下角,下拉/双击 (复制 cell) 注意: 不是选择列

  6. FZU2125_简单的等式

    题目想到了就是一个水题. 提示一下,S(x,m)是一个很小的数.(不超过100) 这样直接枚举这个数,然后求方程的整数解,并且判断是否满足条件即可. ——————(一开始还用Pollard大整数分解+ ...

  7. HDU5266-pog loves szh III

    题目 给出一棵\(n\)个点的树,从1到\(n\)编号,\(m\)次询问\({LCA} _{v\in[L,R]}\). \(n,m\le 3\times 10^5​\) 分析 我的做法是直接对LCA进 ...

  8. 基于注解的spring mvc 中使用 ajax json 的model

    在 Spring mvc3中,响应.接受 JSON都十分方便. 使用注解@ResponseBody可以将结果(一个包含字符串和JavaBean的Map),转换成JSON. 使用 @RequestBod ...

  9. OpenFlow 消息

    消息类型 OpenFlow 的消息共分为三类: Controller-to-Switch 顾名思义,此类消息是由控制器主动发出 Features 用于获取交换机特性 Configuration 用于配 ...

  10. Linux内核分析第二周--操作系统是如何工作的

    Linux内核分析第二周--操作系统是如何工作的 李雪琦 + 原创作品转载请注明出处 + <Linux内核分析>MOOC课程http://mooc.study.163.com/course ...