嚯嚯了好久解决的一个小问题,闲来无事,还是记录下比较好,怕带时候会忘记 随笔 我就随便写了。
想要实现的效果:
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; //加上bor