具有溢出的表格边框半径：隐藏表格边框

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

您是SOOOOO接近。您的问题是由浏览器呈现的cellpadding和cellspacing。没有CSS覆盖，你必须在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;