表格中的邊框底+圓角

Question

我試圖在表格中將td元素的圓角和tr元素的border-bottom合並在一起，以獲得類似於Tab的外觀（我無法更改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/