1

我正在尝试将 td 元素的圆角和 tr 元素的边框底部组合在表格中,以获得类似标签的外观(我无法更改 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相反

我怎样才能让角落和底部边框都正确?

4

1 回答 1

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/

于 2013-02-01T19:55:09.437 回答