css中边框的显示，合并

来源：互联网发布：ubuntu 32 编辑：程序博客网时间：2024/05/16 07:38

默认情况下，即使你写了border不为0，也只显示外边框，内边框是不显示的，要显示内边框可以这样

 <style type="text/css">        .table_border td        {            border-top:1px #DDD solid;            border-right:1px #DDD solid;            border-color:Blue;        }        .table_border        {         border-bottom:1px #DDD solid;         border-left:1px #DDD solid;         border-color:Blue;         width:100%        }    </style>

然后就显示table里的所有方格，但内外边框不是贴在一起的。

下面这句代码写在table使用的修饰类里，可以合并外边框和内边框，合并后边框的宽度是内边框的宽度，表格之间的间距消失。（默认情况下，内外边框是分离的）

border-collapse: collapse;

比如说：

css文件里

/*下层主体*/.down{height:450px;width:450px;border:6px #BBADA0 solid;border-collapse: collapse;}/*游戏打格子*/.down td{margin:0 auto;border:12px #BBADA0 solid;}

html文件里

<table class="down"><tr><td>1</td><td>2</td><td>3</td><td>4</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td></tr></table>

那么就显示边框为12px的表格，内外边框都出现。

0 0