丸いエッジとグリッドテーブルのようなスタイルの表を作成するにはどうすればよいですか？

Question

丸いエッジを得るために多くのことを試しましたが、うまくいきません。ここで私が持っているコードは、これまでのところです：私は本当にを目指し何

<div style="border-radius: 5px;"> 
    <table style="margin-left: 10px; padding-right: 0px; width: 710px;border-collapse:collapse; border-radius: 5px;" 
    class="ui-widget-content"> 
     <tr class="ui-state-default"> 
      <th>abc</th> 
      <th>def</th> 
      <th>xxx</th> 
      <th>xxx</th> 
     </tr> 
     <tr> 
      <th>a</th> 
      <th>b</th> 
      <th>c</th> 
      <th>d</th> 
     </tr> 
    </table> 
</div> 

は、次のようになりますテーブルを持つことです：grid誰もが、私はトップパネル、下部パネルと丸みを帯びた角（CSSを得ることができる方法を提案することができます）？

いくつかのjQuery UIテーマクラスをミックスしようとしました。しかし、これらは役に立たないように見えるので、削除する必要があると思います。私はちょうど上記の例のグリッドのように見える非常に単純な実装がほしいと思う。

Answer 1

上記のコードをブラウザで作成しても動作しません。

上記の貼り付けたコードはIE9のみで動作すると思います。

あなたのCSSに、このようないくつかのことが必要です。

.roundedCorners{ 
     -webkit-border-radius: 10px;/*For Google Chrome*/ 
     -moz-border-radius: 10px;/*For Mozilla*/ 
     border-radius: 10px;/*Standard Specification*/ 
    } 

Answer 2

あなたのコードでは、作業を行います。しかし、あなたはそれが背景色を持たないことを見ることはできません。 「background-color：＃f00;」を追加したとき私はそれを完全にうまく見ることができた。このタイプのCSSは承認されていないため、X-Wareのコードに従うことをお勧めします。したがって、このコードは、今後登場する可能性のある互換性の問題を修正するために使用されます。

丸い角は、IE6、IE7、IE8、IE9では機能しません。このため、私はお勧めしますCSS3 Pie