CSS表格中的border-spacing與border的詳解

1. 可用，需設定在table標籤上或者display為table、inline-table的元素。

　　必須有border-collapse屬性時，才起作用。 如果儲存格不分離，怎麼來的儲存格之間的距離啊。

　　border-spacing：10px 30px;

　　表示儲存格水平間隔10px，豎直間隔30px
　　

table{border-collapse: collapse;/*設定為collapse後，border-spacing就失效了*//*看來這個屬性要在table上設定*/border-spacing: 130px 15px;}

表格裡的border

1.

這裡有兩個border，一個是可以在table標籤上設定，一個是可以在td上設定。

table上的border指的最外圈大框的border，td的border指的是最小的儲存格的border。

具體表現如下：

這裡我設定了padding和border-spacing。

2.

當我設定border-collapse 為collapse的時候，神奇的一幕發生了。

padding和border-spacing 都不起作用了。border-spacing可以理解，但padding為何就沒作用了呢？

我的理解是關鍵還是在collapse，設定這個屬性後，所有的border都串連在了一起。包括外圍border和cell的border，不再分割儲存格。