html细边框的文本框,CSS实现表格细边框的两种方法

在网页制作中，细边框这个制作方法是必不可少的。这里介绍2种常见的表格细边框制作方法，均通过XHTML验证。

复制代码代码如下:

表格细边框的两种CSS实现方法

/* 利用表格样式 border-collapse: collapse 实现细边框 */

.tab1

{

width: 300px;

height: 200px;

border: 1px solid #ccc;

border-collapse: collapse;

}

.tab1 td, .tab1 th

{

border: 1px solid #ccc;

padding: 5px;

}

/* 利用表格样式 border-spacing:0px; 和表格与单元格背景色的不同来实现细边框。

IE7及更早浏览器不支持border-spacing属性，可以通过table的标签属性cellspacing来替代。*/

.tab2

{

width: 300px;

height: 200px;

background-color: #ccc;

border-spacing: 1px;

}

.tab2 td, .tab2 th

{

background-color: #fff;

}

第一种 (通过XHTML验证)

表头

表头

Admin10000.com

Admin10000.com

Admin10000.com

Admin10000.com

第二种 (通过XHTML验证)

表头

表头

Admin10000.com

Admin10000.com

Admin10000.com

Admin10000.com