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