CSS Table Styling
https://stackoverflow.com/questions/284475
-
08-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
I need to style a table to have rounded corners.
I'm just looking at how best to go about it:
Normally when I style a div to have rounded corners, I use 2 divs with empty comments at the top and bottom, and apply sizing & background image CSS to them.
The table, however, has internal borders, so I'd have to carefully align the vertical lines in the corner bg images, to match with the true cell borders.
Is this clear so far?
So I was wondering how others would approach this. I think the best thing I can do is to just use one complete fixed size background image, borders and all, and overlay a borderless table on top. The table will always be the same size after all.
Can anyone think of a better way?
Solution
You better make a background image with just the corners, and not the borders. Apply a class to the top left, top right, bottom left and bottom right cell, to define that the corners-background image should be used.
And style the borders with css. Don't put them in the background image.
In your approach, you'll always gonna end up having the vertical lines in your background image not match the borders of the actual table cells.
OTHER TIPS
25 ways to do it.... http://www.cssjuice.com/25-rounded-corners-techniques-with-css/
Actually, there are too many ways to do it.
Have you tried http://www.roundedcornr.com/?
Do something like this...
XHTML: (sorry had to remove first '<' as it wouldn't let me post it normally, FIX THIS JEFF!)
table id="pricing" border="0" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>Incoming calls</th>
<th>National calls</th>
<th>Calls to US & Canada</th>
<th>Calls to other Phones</th>
<th>Calls to other Countries</th>
<th>SMS text messages</th>
</tr>
</thead>
<tbody>
<tr>
<td>Select</td>
<td>country</td>
<td>from</td>
<td>dropdown</td>
<td>list</td>
<td>above</td>
</tr>
</tbody>
</table>
CSS: #pricing { font-weight:bold; text-align:center }
#pricing thead
{
background-image:url("images/pricing_top.gif");
background-position:top;
background-repeat:no-repeat;
padding:10px 0 0 /* replace 10px with the height of pricing_top.gif */
}
#pricing th
{
background-image:url("images/pricing_header_bg.gif");
background-repeat:repeat-y;
border-bottom:1px solid #c3c2c2;
width:100px /* replace 100px with the width of pricing_header_bg.gif */
}
#pricing tbody
{
background-image:url("images/pricing_bottom.gif");
background-position:bottom;
background-repeat:no-repeat;
padding:0 0 10px /* replace 10px with the height of pricing_bottom.gif */
}
#pricing td
{
background-image:url("images/pricing_cell_bg.gif");
background-repeat:repeat-y;
width:100px /* replace 100px with the width of pricing_cell_bg.gif */
}
Only drawback is that you have to create 4 images, but that shouldn't take too long. You'll also need to add a class to the final cell in each row if you want to add that drop shadow on the right and just change it's background-image and width property accordingly.
Playing off of your original idea, you could add a class to each corner cell effectively turning off their respective offending borders. You could then use a full-width background image in the <thead> and <tfoot> elements to account for the rounded corners.
The rest of the cells can have their borders turned on, and the lines will line up correctly.
The only remaining issue is accounting for that blasted drop shadow. That's a different exercise.
A better way would be a 9-grid where you have the background corners, and top, bottom, left and right backgrounds repeating
Your table goes in cell 5
Edit
As some posted in the comments you can not achieve the effect with a 9-grid. You have to do a 12-grid-system (made up by me right now :)
Live demo
.
Code:
Warning: it's not pretty, but works
<html>
<head>
<style>
.cell1 {background: #f8f8f8 url(images/cell1.gif) no-repeat left top; height: 10px; font-size: 1px;}
.cell2 {background: #f8f8f8 url(images/cell2.gif) repeat-x top; height: 10px; font-size: 1px; border-right: solid 1px #c3c2c2; font-weight:bold; }
.cell3 {background: #f8f8f8 url(images/cell3.gif) no-repeat right top; height: 10px; font-size: 1px;}
.cell4 {background: white url(images/cell4.gif) repeat-y left; border-bottom: solid 1px #c3c2c2; width: 13px; }
.cell5 {background-color: #f8f8f8; padding: 5px; border-right: solid 1px #c3c2c2; font-weight:bold; border-bottom: solid 1px #c3c2c2; }
.cell6 {background: white url(images/cell6.gif) repeat-y right; border-bottom: solid 1px #c3c2c2; width: 18px; }
.cell7 {background: white url(images/cell7.gif) repeat-y left; width: 13px;}
.cell8 {background-color: white; padding: 5px; border-right: solid 1px #c3c2c2; font-weight:normal; }
.cell9 {background: white url(images/cell9.gif) repeat-y right; width: 18px;}
.cell10 {background: white url(images/cell10.gif) no-repeat left bottom; height: 17px;font-size: 1px; }
.cell11 {background: white url(images/cell11.gif) repeat-x bottom; border-right: solid 1px #c3c2c2; height: 17px; font-size: 1px; }
.cell12 {background: white url(images/cell12.gif) no-repeat right bottom; height: 17px;font-size: 1px; }
.lastcolumn, th.lastcolumn, td.lastcolumn {border-right: solid 0px #c3c2c2; }
</style>
</head>
<body>
<table id="pricing" border="0" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th class="cell1"></th>
<th class="cell2"> </th>
<th class="cell2"> </th>
<th class="cell2"> </th>
<th class="cell2"> </th>
<th class="cell2"> </th>
<th class="cell2 lastcolumn"> </th>
<th class="cell3"></th>
</tr>
<tr>
<th class="cell4"> </th>
<th class="cell5">Incoming calls</th>
<th class="cell5">National calls</th>
<th class="cell5">Calls to US & Canada</th>
<th class="cell5">Calls to other Phones</th>
<th class="cell5">Calls to other Countries</th>
<th class="cell5 lastcolumn">SMS text messages</th>
<th class="cell6"> </th>
</tr>
</thead>
<tbody>
<tr>
<td class="cell7"></td>
<td class="cell8">Select</td>
<td class="cell8">country</td>
<td class="cell8">from</td>
<td class="cell8">dropdown</td>
<td class="cell8">list</td>
<td class="cell8 lastcolumn">above</td>
<td class="cell9"></td>
</tr>
<tr>
<td class="cell10"></td>
<td class="cell11"> </td>
<td class="cell11"> </td>
<td class="cell11"> </td>
<td class="cell11"> </td>
<td class="cell11"> </td>
<td class="cell11 lastcolumn"> </td>
<td class="cell12"></td>
</tr>
</tbody>
</table>
</body>
</html>
Note: there are some non-breaking spaces that SO strips from the code. Check out the living demo for more info
Enjoy!
