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 属性