Customizing twitter-bootstrap table. Header floats left

css, ruby-on-rails, ruby-on-rails-3, twitter-bootstrap

Solution

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.

Problem

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: How to align the content with headers? If using float:left 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 :)

Original source

Related problems