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