### 1.发现问题
看到代码里,关于表格,大家不是很喜欢用原生的table,基本都是div来做。究其原因,大概是table的样式有时候难把控,不像直接操作div那么方便。比如:我们想做一个表格,然后希望这个表格带有边框,且最外层的边框是圆角的。
### 2\. 实践采坑ing
#### 2.1 - 【踩坑】 这是什么鬼,有空隙😳
**css 代码如下:**
~~~
table {
border: 1px solid #d8d8d8;
border-radius: 4px;
}
th,td {
border: 1px solid #d8d8d8;
}
复制代码
~~~
**实际效果如下:**
![带空隙的table](https://user-gold-cdn.xitu.io/2019/10/4/16d94c4ae110f89e?imageView2/0/w/1280/h/960/format/webp/ignore-error/1)
#### 2.2 - 【埋坑】 去掉空隙啦 😁 【踩坑】但是,我的边框小圆角呢?😢
表格之间之所以有空隙是因为table有默认的样式,每个单元格之间都有一定的空隙。 只需要在css里让border重合,去掉空隙就好了。
**css 代码如下:**
~~~
table {
border: 1px solid #d8d8d8;
border-radius: 4px;
/*