Search code examples
htmlinternet-explorer-8internet-explorer-7css-tables

Can't get lines around table borders/cells

I have several web pages containing tables, for which I'd like to have line-borders around the tables and the cells. In fact, some of these pages existed for several years already, and rendered acceptably in IE6, IE7.

We switched about 6 months ago to a completely different set of style sheets to change our site look and feel. We also switched to "modern" browsers such as IE8 (and because I couldn't stop Vista) to IE9.

Now the borders don't render at all.

I spent a day fighting with this about a month ago, and failed to fix it. It seemed that I could reduce the page down to just the barest table and IE8 would still not render the border. I think I decided IE8 was just buggy, but I'm not an HTML expert so it is more likely that I'm buggy. (I'm just getting back to this; I'll go see if I can find that reduced page).

Here is one such page: 

http://www.semdesigns.com/products/DMS/DMSComparison.html

The tables should be obvious; you can tell them by their absence of lines :-{

The URI validates using the W3C service as HTML 4.01 Transitional.

Any suggestions?

EDIT: Posters all pointed out that the new style sheets set the default borders to 0. Oops!

Solution

  • Your new stylesheets appear to use reset values, i.e. it sets lots of different elements to border:0 (including the table). You'll need to specifically set the border on the table and cells.

    To set the border around just the table simply use table.box {border:1px solid #000}. If however you set the border on all sides of the table and cells you will have a border twice as thick as you need.

    I therefore use the following trick to set the top and right border of the outside table, and the bottom and left of the table cells. This gives the appearence of an even border across the whole content of the table.

    table.box {
    border-top: 1px solid #000;
    border-right: 1px solid #000;
}

table.box td {
    border-bottom: 1px solid #000;
    border-left: 1px solid #000;
}

    I've noticed however you have some empty cells in your box table, so you'll need to remove these to prevent the double borders.