表border-radius with overflow：隐藏隐藏表边框

Question

如何在不丢失边框的情况下围绕此表的顶角？

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

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;
    ...
}

Answer 2

你太近了。您的问题是浏览器正在呈现cellpadding和cellspacing。没有css-override，你必须在HTML中声明它。

<table class="line-items" cellpadding="0" cellspacing="0">

Answer 3

我不知道为什么，但在某些情况下，border-radius不起作用，您需要添加overflow-hidden。这是真的，边界也被隐藏了。

但是box-shadow解决了这个问题，只需将此行添加到表格的css中即可：

box-shadow:0 0 0 2px black;