title: How can I create a table with round edges and a style like a grid table?
body: <p>I have tried many things to get round edges but it doesn't work. Here's the code I have so far:</p>
  
  <pre><code>&lt;div style="border-radius: 5px;"&gt;
      &lt;table style="margin-left: 10px; padding-right: 0px; width: 710px;border-collapse:collapse; border-radius: 5px;" 
      class="ui-widget-content"&gt;
          &lt;tr class="ui-state-default"&gt;
              &lt;th&gt;abc&lt;/th&gt;
              &lt;th&gt;def&lt;/th&gt;
              &lt;th&gt;xxx&lt;/th&gt;
              &lt;th&gt;xxx&lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;th&gt;a&lt;/th&gt;
              &lt;th&gt;b&lt;/th&gt;
              &lt;th&gt;c&lt;/th&gt;
              &lt;th&gt;d&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/table&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>What I really aim for is to have a table that looks like this: <a href="http://www.trirand.com/blog/jqgrid/jqgrid.html" rel="nofollow">grid</a>  Can anyone suggest how I could get the top panel, bottom panel and the rounded corners (css)?</p>
  
  <p>Please note that I tried to mix in some jQuery UI theme classes. But these don't seem to help so I think they need removing. I just want a really simple implementation that looks like the grid in the example above. </p>