Make a table with rounded corners on body not head, and have a background color

Question

I'm trying to make a table with a color background and a body that has round corners. I have managed to get this to work but now white corners are showing below the table head... can someone please help me.

This is an example of my code, but I am using bootstrap so there are no vertical borders. I just need to get rid of the top white corners on the body. http://jsfiddle.net/chickatysplit/cts858ro/

<div class="table-background">  
<table class="table">
  <thead style="background-color: #e5e5e5;">
    <tr style="height: 20px;">
      <th>table header</th>
      <th>table header</th>
      <th>table header</th>
      <th>table header</th>
    </tr>
  </thead>
  <tbody>
    <tr style="border-top-left-radius: 10px;">
      <td>some text</td>
      <td>some text</td>
      <td>some text</td>
  <td >some text</td>
    </tr>
    <tr>
      <td>some text</td>
      <td>some text</td>
      <td>some text</td>
      <td>some text</td>
    </tr>
        </tbody>
</table>
</div>

To clarify I want the thead to have the same color as the grey background, but the tbody to have white background with round corners. Please help!

Answer 1

You need to remove the white background on the table and give the td cells a white background instead:

...

table {
    border-collapse: separate;
    border-radius: 10px; 
}
td { background: #fff; }

...

Also - having inline style declarations (i.e. <tr style="...">) isn't necessary: that is what your stylesheet is for. :)