1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > html table的边框线怎么变圆角_table 设置圆角边框 底部padding样式

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

时间:2019-02-11 09:16:47

相关推荐

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; //加上bor

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。