html table的边框线怎么变圆角_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: collaps