CSS Properties Border-collapse and border-spacing The difference between the detailed

Table

Border-collapse:collapse; Indicates that the borders are merged together.

Border-collapse:separate; Indicates the spacing between the borders, the size of the spacing is border-spacing:px, and the size is defined.

Css:

* {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;}. title2 {width:350px;}. title3 {width:90px;}

Html:

<table> <tbody> <tr class= One > <td class= title > Gift name </td> <td class= Le2 "> Redemption rules </td> <td class=" Title3 "> whether limited </td> </tr> <tr> <td>qq show Dress up, QQ space Dress </td> <td> Activities during each QQ limited collection, QQ show, QQ space dress valid for 7 days </td> <td> Limited </td> </tr> &LT;TR&G      T <td> Red Diamond one month </td> <td rowspan= "2" > Daily limit of 1, up to 20 times during the event </td> <td> Unlimited </td> </tr   > <tr> <td> fishing holidays, QQ dance, Dynasty Wardragon, the Three Kingdoms, search, Shushan, QQ tribe and other packages </td> <td> Limited </td> </tr> <tr> <td> Red Diamond one month </td> <td rowspan= "3" > Daily limit of 1, up to 10 times during the campaign </td> <td> No Limit &lt ;/td> </tr> <tr> <td>qq Mobile Shell </td> <td> Limited </td> </tr> &LT;TR&G      T <td> Snake qq</td> <td> Limited </td> </tr> <tr> <td>Ipad</td> < Td> ActivitiesPeriod Limited Collection 1 times </td> <td> Limited </td> </tr> </tbody></table> 

：

When

Css:

* {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;}. title2 {width:350px;}. title3 {width:90px;}

：