日期:2014-05-16  浏览次数:20679 次

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即可

?

?