html table的边框线怎么变圆角_table 设置圆角边框 底部padding样式

嚯嚯了好久解决的一个小问题，闲来无事，还是记录下比较好，怕带时候会忘记 随笔 我就随便写了。

想要实现的效果:

1.边框有圆角

2.每一个td有1px的边框

3.底部有个红底

最初我的做法：

table{

border-collapse: collapse;

border-radius: 4px;

padding-bottom: 10px;

background-color: #b5272a;

border: 1px solid #b5272a;

}

你会发现效果是这样的：

1.没有底部红底

2.没有圆角

后面上网 查了下才知道

border-collapse: collapse与border-radius: 4px两者不能混在一起使用。

之后将border-collapse值更改为separate,你会发现效果是这样的：

有圆角 有底部红色 但更丑了 td边框没有合并

随后又上网查了下 做法更改为：

table{

border-collapse: separate;

border-radius: 4px;

padding-bottom: 10px;

//background-color: #b5272a; //不加背景先看看效果

border: 1px solid #b5272a; //加上border看看效果

}

table tr td{

border-top:1px solid #b5272a;

border-right:1px solid #b5272a;

}

不加背景的效果，td之间的边框都没有衔接上：

加上背景的效果，巨丑，虽然有圆角，有底部红色：

加上背景，去掉border的效果以及不加背景 不加border的效果你们自己看下吧，都巨丑。

也是自己懒，非得用table来做，后面甚至还在table外层在加了个div，用这个div做圆角 以及底部红底 ，都没法很好的实现想要的效果。

最后发现td之间的间距是可控的，实现想法：

给table加个红色背景，td白色背景，不给table及td加边框 td之间的间距就会出现红色边框的效果。

具体代码：

table{

border-radius: 4px;

border-collapse: separate; //这个值是默认的

padding-bottom: 10px;

background-color: #b5272a;

}

table tr td{

background-color: #fff;

}

//这个属性控制td的间距为1像素