4

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: enter image description here

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

Marcelo De Polli
  • 28,123
  • 4
  • 37
  • 47
Jackie Chan
  • 2,654
  • 6
  • 35
  • 70

2 Answers2

21

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

enter image description here

Update: Fixed on Firefox, simplified selectors.

Marcelo De Polli
  • 28,123
  • 4
  • 37
  • 47
  • Fixed it. On Firefox, you need to apply the `background-color` to the same tag that receives the `border-radius`. It actually makes more sense. – Marcelo De Polli Mar 23 '13 at 15:29
1

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.

Community
  • 1
  • 1
Peter Herdenborg
  • 5,736
  • 1
  • 20
  • 21
  • Thanks for the solution, however that does not solve the issue. First of all, I have more than 43 tables, and it will take around 4-5 weeks to adjust it accordingly in multiple browsers Also, the solution can not be applied to only first and the last cell, please review the mockup – Jackie Chan Mar 23 '13 at 02:34
  • I mean first and last cell of every `` which you want to appear to have rounded corners. Is that not compatible with your mockup? – Peter Herdenborg Mar 23 '13 at 02:41
  • OK, I got it, but it's to way hacky :) – Jackie Chan Mar 23 '13 at 03:43
  • 1
    Well, I can't change reality. You wanted a solution and I found what seems to be the best one available, which is confirmed by mdepolli's anwer that uses the same approach. – Peter Herdenborg Mar 23 '13 at 10:12