使用CSS实现表格细边框的三种方式_html/css_WEB-ITnose

说到表格，虽说随着前端技术的发展div已经遍地开花彻底推翻了table布局的时代。可是当遇到报表之类的操作是table还是非常值得使用的。

由于操作表格的时候不可避免使用到细边框效果，所以我就整理了一下常用的三种实现细边框表格的方式，分享给大家，代码如下：

            /*可以应用于所有浏览器,但是需要设置table的标签属性:border="0" cellpadding="0" cellspacing=1*/        .demo1 {            background-color: #ccc;        }            .demo1 th,.demo1 td {                background-color: #fff;            }        /* 利用表格样式:{border-spacing:0px;}和表格与单元格背景色的不同来实现细边框。[注:IE7及以前的浏览器不支持border-spacing]*/        .demo2 {            background-color: #ccc;            border-spacing: 1px;        }            .demo2 th, .demo2 td {                background-color: #fff;                            }        /* 为表格设置合并边框模型:{border-collapse: collapse;} 实现细边框。[注:如果没有规定 !DOCTYPE,则 border-collapse 可能产生意想不到的结果。] */        .demo3 {            border: 1px solid #ccc;            border-collapse: collapse;        }            .demo3 th, .demo3 td{                border: 1px solid #ccc;            }    
Demo1
    

登录后复制

Row1-01 Row1-02 Row1-03 Row2-01 Row2-02 Row2-03

Demo2

Row1-01 Row1-02 Row1-03 Row2-01 Row2-02 Row2-03

Demo3

立即学习“前端免费学习笔记（深入）”；

Row1-01 Row1-02 Row1-03 Row2-01 Row2-02 Row2-03

效果图：

登录后复制