开发者

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 bor开发者_如何学Goders 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!


From what I can see you have border:0; in the styling of the tables.

This will hide the borders on tables.


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.


I see no borders in Firefox either.

  1. SDstyle.css, line 16. You do CSS reset which sets border: 0; for a big list of tags, including table, td, tr, th ...

  2. You declare your table like <table class="box">, but at the same time you have no such style defined in your CSS files.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜