table的边框线 css设置

边框线的设置很简单，比如现有一个表格：

<table class="table_border">

<tr><td>ID</td><td>姓名</td><td>年龄</td></tr>

<tr><td>1</td><td>张三</td><td>22</td></tr>

<tr><td>2</td><td>李四</td><td>23</td></tr>

<tr><td>3</td><td>王五</td><td>25</td></tr>

<tr><td>4</td><td>赵六</td><td>21</td></tr>

</table>

第一种：

.table_border{

width:400px ;

border-collapse: collapse ;

border-left: 1px solid red ;

border-bottom: 1px solid red ;

}

.table_border td{

border-right:1px solid red ;

border-top:1px solid red ;

}

其思路：border-collapse:collapse ;是将表格的边框合并为单一边框，默认是边框会被分开；表格外边框的左边框和下边框设为1px，表格内边框中的td边框只设定右边框和上边框即可。(表外边框也可以是：左、上；表内边框：右、下)。

 

第二种：

        .table_border{

border-collapse: collapse ;

width:400px ;

}

.table_border td{

border: 1px solid red  ;

}

其思路：表格外边框不设定，直接设定内边框，然后使用collapse即可