Jquery Mobile tables with rounded edges

Question

I'm busy using reflow tables in jquery mobile. I would like to have the 1st and last rows of my table to have rounded edges. I'm using the following code:

th:first-child {
   -moz-border-radius: 6px 0 0 0;
   -webkit-border-radius: 6px 0 0 0;
   border-radius: 6px 0 0 0;
}

th:last-child {
   -moz-border-radius: 0 6px 0 0;
   -webkit-border-radius: 0 6px 0 0;
   border-radius: 0 6px 0 0;
}

The HTML is similar to this;

<table>
<thead>
    <tr>
        <th>First column</th>
        <th>Second column</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Row one, cell one</td>
        <td>Row one, cell two</td>
    </tr>
    <tr>
        <td>Row two, cell one</td>
        <td>Row two, cell two</td>
    </tr>
    <tr>
        <td>Row three, cell one</td>
        <td>Row four, cell two</td>
    </tr>
</tbody>

I would literally just want the top most and bottom most cell to have rounded edges.

Answer 1

This comes a little close...

thead tr:first-child th:first-child {
   -moz-border-radius: 6px 0 0 0;
   -webkit-border-radius: 6px 0 0 0;
   border-radius: 6px 0 0 0;
}

thead tr:first-child th:last-child {
   -moz-border-radius: 0px 6px 0 0;
   -webkit-border-radius: 0px 6px 0 0;
   border-radius: 0px 6px 0 0;
}

tr:last-child td:first-child{
   -moz-border-radius: 0px 0px 0px 6px;
   -webkit-border-radius: 0px 0px 0px 6px;
   border-radius: 0px 0px 0px 6px;
}

tr:last-child td:last-child{
   -moz-border-radius: 0px 0px 6px 0px;
   -webkit-border-radius: 0px 0px 6px 0px;
   border-radius: 0px 0px 6px 0px;
}