table细边框样式

来源：互联网发布：亿百润知乎编辑：程序博客网时间：2024/05/29 12:51

方式1

设置边框的BORDER=0 、cellspacing=1，设置Table的背景色为所要的边框色，再设置所有的td背景色为白色，这样细边框就显露出来了。

方式2

设置BORDER=0 ，再通过CSS，给Table加上1px的border-top,border-left，然后再设置所有的td的border-right,border-bottom，这样也能达到所要的效果。

方式3

设置table的CSS为{border-collapse:collapse;border:none;},再设置td的CSS为{border:solid #000 1px;}

其中，border-collapse有两个属性，separate 和 collapse

1、separate是默认属性，表格边框默认有1px 的间隙

2、collapse，是将表格边框的间隙去掉，这样给表格的td边框赋值时就不会产生双线框了

例如：

table{}{border-collapse:collapse;border-spacing:0;border-left:1px solid #888;border-top:1px solid #888;background:#efefef;}

th,td{}{border-right:1px solid #888;border-bottom:1px solid #888;padding:5px 15px;}

th{}{font-weight:bold;background:#ccc;}

文章转载自： table 细边框 http://www.studyofnet.com/news/857.html

0 0