テーブルボーダー半径オーバーフロー：非表示テーブルボーダーを隠す

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がブラウザによってレンダリングされていることです。あなたのHTMLに宣言する必要があるためのcss-overrideはありません。

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

Answer 3

私はなぜ知らないが、いくつかのケースでは、border-radiusは動作しません、あなたがoverflow-hiddenを追加する必要があります。そして、それは本当です、国境も隠される。

しかし、ボックスシャドウの問題を解決する、ちょうどあなたのテーブルのCSSに次の行を追加します

box-shadow:0 0 0 2px black;