html - 表边界半径溢出 : hidden hides table border

Question

我怎样才能在不丢失边框的情况下圆这个表格的顶 Angular ？

当我将溢出设置为隐藏时，我得到了圆 Angular ，但边框消失了。

html

<table class="line-items">
    <tr class="line-item-header">
        <td class="item-summary">
            Items
        </td>
    </tr>
    <tr class="line-item">
        <td class="item-summary">
            @o.Summarize()
        </td>
    </tr>
    <tr class="line-item">
        <td class="item-summary">
            @o.Summarize()
        </td>
    </tr>
    <tr class="line-item">
        <td class="item-summary">
            @o.Summarize()
        </td>
    </tr>
    <tr class="line-item">
        <td class="item-summary">
            @o.Summarize()
        </td>
    </tr>
</table>​

CSS

.line-items *
{   
    border:1px solid black;
}
.line-items
{
    border-radius:6px 6px 0 0;
    /*overflow:hidden;*/
    border:1px solid black;
    margin:20px;
    width:3in;
}
td
{
    padding:5px 10px;
}
.line-item-header
{
    background-color:black;
    color:white;
    font-family:arial black, arial, sans serif;
}
.line-item
{
    background-color:white;
}
.line-item:nth-child(odd)
{
    background-color:#eee;
}
body
{
    background-color:#ffd;
}​

http://jsfiddle.net/benstenson/3bvWS/1/

Answer 1

我不知道你为什么需要overflow: hidden。这对我有用。 http://jsfiddle.net/elclanrs/3bvWS/13/

td, tr { display: block; }
tr {
    border:1px solid black;
    border-top: 0;
}
.line-item-header {
    border-radius: 6px 6px 0 0;
    ...
}