[英]border-bottom + rounded corners in a table
I am trying to combine in a table rounded corners for td elements and border-bottom for tr elements, to get a tab-like look (I can't change the html structure). 我试图在表格中将td元素的圆角和tr元素的border-bottom合并在一起,以获得类似于Tab的外观(我无法更改html结构)。
Demo: http://jsfiddle.net/VvdBQ/ 演示: http : //jsfiddle.net/VvdBQ/
Code: 码:
table#one {width:100%;border-spacing:0;border-collapse:separate;}
tr {border-bottom:5px solid red;}
td {font-weight:bold;text-align:center;background:blue;border-radius:15px 15px 0 0;border:1px solid green;}
My issue (viewed in Chrome): 我的问题(在Chrome中查看):
border-collapse:separate
the corners are correctly rounded but I don't see the bottom border 与border-collapse:separate
正确地将角圆化,但是我看不到底部边框 border-collapse:collapse
it is the opposite 与border-collapse:collapse
相反 How can I get both the corners and the bottom border correct? 如何使角和底边界都正确?
If you use border-collapse:separate;
如果使用border-collapse:separate;
and also move the style all to the td
you should be able to get what you want with this: 并将样式全部移至td
您应该可以通过以下方式获得所需的内容:
td {
font-weight:bold;
text-align:center;
background:blue;
border-bottom:5px solid red;
border-top:1px solid green;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
Here a fiddle: http://jsfiddle.net/digthedoug/qjLyZ/ 这里是一个小提琴: http : //jsfiddle.net/digthedoug/qjLyZ/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.