### 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 属性](https://link.juejin.im?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FCSS%2Fbox-shadow)
关注下面的标签，发现更多相似文章
[
CSS
](/tag/CSS)
[](/user/5d5f9f54e51d4561f95eea54)
[](/user/5d5f9f54e51d4561f95eea54)
[](/user/5d5f9f54e51d4561f95eea54)
链接：https://juejin.im/post/5d96b6afe51d4578495472cd
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/37446.html
