表格中的边框底部+圆角

Question

我正在尝试在td元素的表格圆角和tr元素的border-bottom中合并，以获得类似于标签的外观（我无法更改html结构）。

演示：http://jsfiddle.net/VvdBQ/

代码：

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角正确圆角但我看不到底边
• 与border-collapse:collapse相反，

如何让角落和底部边框都正确？

Answer 1

如果您使用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;
}

这里有一个小提琴：http://jsfiddle.net/digthedoug/qjLyZ/