表格中的border-spacing與border

border-spacing

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，不再分割單元格。