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

來源:互聯網
上載者:User
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,不再分割儲存格。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.