首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

table的边框线 css设立

2014-01-06 
table的边框线 css设置边框线的设置很简单,比如现有一个表格:table classtable_bordertrtdID/td

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

?

?

热点排行