How can I have a rounded border on my table and border-collapse: collapse?

Question

I have the following:

<TABLE style="border-radius: 5px; border: 1px solid #999; xborder-collapse: collapse;">
  <THEAD>
    <TR style="background-color: red;">
      <TH>Weekday</TH>
      <TH>Date</TH>
      <TH>Manager</TH>
      <TH>Qty</TH>
    </TR>
  </THEAD>
  <TBODY>
    <TR>
      <TD>Mon</TD>
      <TD>09/11</TD>
      <TD>Kelsey</TD>
      <TD>639</TD>
    </TR>
    <TR>
      <TD>Tue</TD>
      <TD>09/12</TD>
      <TD>Lindsey</TD>
      <TD>596</TD>
    </TR>
    <TR>
      <TD>Sun</TD>
      <TD>09/17</TD>
      <TD>Susan</TD>
      <TD>272</TD>
    </TR>
  </TBODY>
</TABLE>

Example

I would like to have rounded borders, no space between cells also have the top header area of my table a different color. But it doesn't seem to work.

I created this fiddle. When I comment out border-collapse I get the rounded edges but spaces between cells. When it's in I get no border radius and no space between cells.

Update:

Here seems to be the perfect solution: Fiddle

Have you looked at this: http://stackoverflow.com/questions/4932181/rounded-table-corners-css-only. There's a fiddle on there as well, and it seems to do what you are asking for. — PhillipKregg, Jan 17 '12 at 04:21
The closest I found to a solution is here: http://jsfiddle.net/JWb4T/1/ — Samantha J T Star, Jan 17 '12 at 05:37

score 12 · Answer 1 · edited May 20 '14 at 09:28

12

Adding border-spacing:0 instead of border-collapse:collapse on your table tag fixes it:

jsFiddle Demo

edited May 20 '14 at 09:28

joker

982
9
23

answered Jan 17 '12 at 04:26

SpoonNZ

3,780
1
20
25

This almost fixes it but there is still some leak of color if you look carefully :-( – Samantha J T Star Jan 17 '12 at 05:36
Ergh. Right you are. I think I've had luck applying the bf colour to the TH not TR, and giving them a border radius. A few `tr:first-child th:first-child: border-radius:5px 0 0 0;` style rules should help. Messy, but I think effective – SpoonNZ Jan 17 '12 at 08:04
Oh, what about giving a thead element the radius and background? Would do a fiddle but iPad is not good for coding... – SpoonNZ Jan 17 '12 at 08:06

score 1 · Answer 2 · edited Feb 24 '16 at 08:07

Here's an example using a wrapper div :

<div style="display: table;
            padding: 2px;
            border-radius: 5px;
            border: 1px solid #999;">
  <TABLE style="border-collapse: collapse;">
    <THEAD>
      <TR style="background-color: red;">
        <TH>Weekday</TH>
        <TH>Date</TH>
        <TH>Manager</TH>
        <TH>Qty</TH>
      </TR>
    </THEAD>
    <TBODY>
      <TR>
        <TD>Mon</TD>
        <TD>09/11</TD>
        <TD>Kelsey</TD>
        <TD>639</TD>
      </TR>
      <TR>
        <TD>Tue</TD>
        <TD>09/12</TD>
        <TD>Lindsey</TD>
        <TD>596</TD>
      </TR>
      <TR>
        <TD>Sun</TD>
        <TD>09/17</TD>
        <TD>Susan</TD>
        <TD>272</TD>
      </TR>
    </TBODY>
  </TABLE>
</div>

You can see it working here: jsFiddle

Note: display:table; is not supported in IE7 and earlier. IE8 requires a: !DOCTYPE in the document. All modern browsers (including IE9) support it though, so it shouldn't be a problem.

How can I have a rounded border on my table and border-collapse: collapse?

2 Answers2

Linked