CSS Table Styling

Answer 1

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.

Answer 2

Have you tried http://www.roundedcornr.com/?

Answer 3

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 &amp; 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.

Answer 4

25 ways to do it.... http://www.cssjuice.com/25-rounded-corners-techniques-with-css/

Actually, there are too many ways to do it.

Answer 5

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.