Customizing twitter-bootstrap table. Header floats left

Question

Currently I am working on table customziation for my project. I am using Twitter Bootstrap rails gem (2.2.6). However I think this should not be an issue when it comes to CSS customization.

So basically I want to achieve the following mockup:

However when I put radius border on nothing happens unless I float it left or display it in block I don't see rounded borders. Please review the following jsfiddle: http://jsfiddle.net/zaEFz/2/

But the issue is: when floating the content left, I loose the structure of the table. That means headers don't match content anymore. So few questions:

1. How to align the content with headers? If using float:left

2. How to round the corners for each row? If not using float:left and display:block

If you answer one of the questions that should be fine :)

Answer 1

Sadly, border-radius doesn't work on <tr> tags -- only on <th> and <td> tags. But the style you need is very much achievable within those constraints.

CSS

table {
  border-collapse: separate;
  border-spacing: 0 5px;
}

thead th {
  background-color: #006DCC;
  color: white;
}

tbody td {
  background-color: #EEEEEE;
}

tr td:first-child,
tr th:first-child {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

tr td:last-child,
tr th:last-child {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

jsFiddle

Update: Fixed on Firefox, simplified selectors.