Stylesheet producing ugly tables

[blasto333]

Here is my stylesheet that is included in every part of my program:

<?
include ("../settings.php");
?>

table,td,tr,th
{
        border-color:  <?  echo $bordercolor ?>;
        border-width: <?  echo $borderwidth ?>px;
        border-style: <?  echo $borderstyle ?>;
        border-collapse: collapse;
        color: <?  echo $textcolor ?>;
}


a:link { color: <?  echo $alink ?>; }
a:visited { color: <?  echo $vlink ?>; }
p { color: <?    echo $pcolor ?>; }
h1, h2, h3, h4, h5, h6, h7 { color: <?    echo $hcolor ?>; }

The result is ugly looking tables such as the file attached. How can I make it so the border is single around the table and in the cells so it doesn't have a double border.

[QuietDean]

hiya, welcome to the forums.

Firstly, I would separate the css for table , td & tr.

You can use a 1px border around the table. Then a 1px border around each cell. Then remove cellspacing and cellpadding from the cells/table. This will give an overall 2px effect, but it looks better than the double one.

You other choice is to manually use style="blah" to set each cells separate borders. prob not an option.

oops, there is a third choice. Set the table 'background-color' to the color you wish to have the border, then set cellspacing to 1px. Then remove your borders, this will 'fake' a decent border.

[blasto333]

Thanks, I love that third option it really improved the look of my program.

Thanks,


Chris

[DyerA]

Thanks, I love that third option it really improved the look of my program.

Thanks,


Chris

Great idea. After a few hours I stumbled upon this site and your suggestion fixed the problem I was having in 5 minutes.

a

[QuietDean]

Excellent.

Its a nice-looking, cross-browser method.

[DyerA]

I really like the third method above, by using the background, however, when I try to print the report, the "gridlines" do not show.

Here is the style
/* main body grid of report */
table.clsMain {
width: 100%;
background-color: Gray;
font-size: smaller;
}

tr.clsMainHeader {
background-color: Silver;
text-align: left;
border-width: medium;
}

tr.clsMainData {
text-align: left;
}

Thanks

[QuietDean]

Ah yes. That is a client-side choice.

By default, IE does not print background-colors. if its just you, then goto Tools->Internet Options->Advanced->Print Background Colors

If its for the general public, then your best bet is to use one of the other two methods mentioned above.