table
border-collapse:collapse; 表示邊框合併在一起。
border-collapse:separate;表示邊框之間的間距,間距的大小用border-spacing:px;定義大小。
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | * { margin : 0 ;
padding
: 0 ;}
table {
border-collapse : separate ; border-spacing : 20px ;
width : 600px ;
line-height
: 22px ;
font-size
: 12px ;}
tr,td { border : 1px solid #999 ;}
td { padding : 1px 2px ;}
.one {
font-weight
: bolder ; color : red ;}
.title { width : 140px ;}
.title 2 { width : 350px ;}
.title 3 { width : 90px ;}
|
登入後複製
HTMl:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | < table >
< tbody >
< tr class = "one" >
< td class = "title" >礼品名称</ td >
< td class = "title2" >兑换规则</ td >
< td class = "title3" >是否限量</ td >
</ tr >
< tr >
< td >QQ秀装扮、QQ空间装扮</ td >
< td >活动期间每个QQ限量领取,QQ秀、QQ空间装扮有效期7天</ td >
< td >限量</ td >
</ tr >
< tr >
< td >红钻一个月</ td >
< td rowspan = "2" >每天限领1个,活动期间最多兑换20次</ td >
< td >不限</ td >
</ tr >
< tr >
< td >捕鱼假日、QQ炫舞、王朝霸域、战龙三国、寻侠、蜀山传、QQ部落等礼包</ td >
< td >限量</ td >
</ tr >
< tr >
< td >红钻一个月</ td >
< td rowspan = "3" >每天限领1个,活动期间最多兑换10次</ td >
< td >不限</ td >
</ tr >
< tr >
< td >QQ秀手机壳</ td >
< td >限量</ td >
</ tr >
< tr >
< td >蛇年QQ</ td >
< td >限量</ td >
</ tr >
< tr >
< td >Ipad</ td >
< td >活动期间限领取1次</ td >
< td >限量</ td >
</ tr >
</ tbody >
</ table >
|
登入後複製
效果圖:
#當
CSS:
1 2 3 4 5 6 7 8 9 10 | * { margin : 0 ; padding : 0 ;}
table {
border-collapse : collapse ;
width : 600px ; line-height : 22px ; font-size : 12px ;}
tr,td { border : 1px solid #999 ;}
td { padding : 1px 2px ;}
.one { font-weight : bolder ; color : red ;}
.title { width : 140px ;}
.title 2 { width : 350px ;}
.title 3 { width : 90px ;}
|
登入後複製
效果圖:
以上是css屬性border-collapse與border-spacing的差異詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!