我正在尝试在表格中结合 td 元素的圆 Angular 和 tr 元素的 border-bottom,以获得类似标签的外观(我无法更改 html 结构)。
代码:
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;}
我的问题(在 Chrome 中查看):
- 使用
border-collapse:separate
Angular 正确圆化但我看不到底部边框 - 与
border-collapse:collapse
相反
如何让边 Angular 和底边都正确?
最佳答案
如果你使用 border-collapse:separate;
并将样式全部移动到 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;
}
这里有一个 fiddle :http://jsfiddle.net/digthedoug/qjLyZ/
关于html - border-bottom + 表格中的圆 Angular ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14653468/