CSS偶有所得 - table 邊框加圓角踩坑

1.發現問題

看到代碼裏，關於表格，你們不是很喜歡用原生的table，基本都是div來作。究其緣由，大概是table的樣式有時候難把控，不像直接操做div那麼方便。好比：咱們想作一個表格，而後但願這個表格帶有邊框，且最外層的邊框是圓角的。

2. 實踐採坑ing

2.1 - 【踩坑】 這是什麼鬼，有空隙😳

css 代碼以下:

table {
  border: 1px solid #d8d8d8;
  border-radius: 4px;
}
th,td {
  border: 1px solid #d8d8d8;
}
複製代碼

實際效果以下:

2.2 - 【埋坑】 去掉空隙啦 😁 【踩坑】可是，個人邊框小圓角呢？😢

表格之間之因此有空隙是由於table有默認的樣式，每一個單元格之間都有必定的空隙。 只須要在css裏讓border重合，去掉空隙就行了。

css 代碼以下:

table {
  border: 1px solid #d8d8d8;
  border-radius: 4px;
  /* 消除單元格之間的空隙 */
  border-collapse: collapse;
}
th,td {
  border: 1px solid #d8d8d8;
}
複製代碼

效果以下:

2.3 - 【埋坑】把小圓角搞回來😈

空隙是沒了，可是，小圓角也不見了。 原來，當咱們使用了border-collapse的時候，border-radius屬性就不會被應用到表格元素上了。 So...不如先讓外邊框整個不見，而後用盒子陰影來作小圓角。

css 代碼以下:

table {
    border: 1px solid #d8d8d8;
    border-radius: 4px;
    /* 消除單元格之間的空隙 */
    border-collapse: collapse;
    /* 消除掉外邊框 */
    border-style:hidden  
}
複製代碼

消除外邊框效果以下:

距離成功就一步之遙啦😋

使用box-shadow:(X偏移量，Y偏移量，陰影模糊半徑，陰影擴展半徑，陰影顏色) 咱們想讓這個陰影替代border，那就把X，Y偏移量以及陰影模糊半徑都設置爲0，擴展半徑就是咱們但願的border的粗細。陰影顏色就是但願的border的顏色。這樣一個假border就作好了。

css 代碼以下:

table {
    border: 1px solid #d8d8d8;
    border-radius: 4px;
    /* 消除單元格之間的空隙 */
    border-collapse: collapse;
    /* 消除掉外邊框 */
    border-style:hidden  
    /* hack一下加個陰影 */
    box-shadow: 0 0 0 1px #d8d8d8;
}
複製代碼

3. 總結

主要緣由是table有一些自定義的樣式，致使加個圓角的邊框不太容易直接操做。首先要去掉單元格空隙。可是去掉空隙的border-collapse屬性會致使border-radius不生效。因此只能隱藏原有邊框，用box-shadow陰影作個假邊框。

css 代碼以下:

table {
    border: 1px solid #d8d8d8;
    border-radius: 4px;
    /* 消除單元格之間的空隙 */
    border-collapse: collapse;
    /* 消除掉外邊框 */
    border-style:hidden  
    /* hack一下加個假邊框 */
    box-shadow: 0 0 0 1px #d8d8d8;
}
th,td {
  border: 1px solid #d8d8d8;
}
複製代碼

4.參考資料

1. box-shadow 屬性