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 :)

Solution 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.

Solution 2

To make things line up if you go for the float/block solution, I think you have to specify a fixed width for <td> and <th>:

th, td {
    width: 40px;
    padding-left: 5px;
    padding-right: 5px;
}

If you want different side padding for <th> and <td> you'd have to adjust the width accordingly so that the totals match.

If you leave the table layout alone, the solution seems to be to apply the border-radius to the first and last cell of the thead rather than to the tr. There may be other hacks required too to get things working. Please see How-to create rounded corners on Table Head only and How can I have a rounded border on my table and border-collapse: collapse? for reference.