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
Use the CSS border-radius property to add rounded corners to the table cells.
(See Snippet below to confirm). The border-collapse CSS property determines whether a table's borders are separated or collapsed. In the separated model, adjacent cells each have their own distinct borders. In the collapsed model, adjacent table cells share borders.
CSS Syntaxborder-radius: 1-4 length|% / 1-4 length|%|initial|inherit; Note: The four values for each radius are given in the order top-left, top-right, bottom-right, bottom-left. If bottom-left is omitted it is the same as top-right. If bottom-right is omitted it is the same as top-left.
Adding border-spacing:0
instead of border-collapse:collapse
on your table tag fixes it:
jsFiddle Demo
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With