Table Border Issue

liunx · Jan 9, 2008

Hey, all. I'm having a problem with the thin-border style CSS tables. Here's the table: 
 
<table width="650" cellspacing="0" cellpadding="0"> 
<tr> 
<td valign="middle" align="center" height="64" colspan="2"><h3>[LOGO]</h3></td> 
</tr> 
<tr> 
<td width="50" valign="middle" class="cursor-default">- Home</td> 
<td width="50" valign="middle" onMouseOver="bgColor='#ccccff'" onMouseOut="bgColor='#ffffff'" onClick="window.location='somewhere.html'" class="cursor-pointer">Snowmobile Rentals & Tours</td> 
</tr> 
</table> 
 
 
...and the CSS: 
 
TABLE {border:solid; border-width:1px; border-color:#000000; background-color:#ffffff;} 
 
 
Now my question is--why the heck do I only get one border (as in, the border around the table)!? It's been driving me nuts. I want to have my boder separate each of the objects, but it's totally refusing to. 
 
Thanks.td {border:solid; border-width:1px; border-color:#000000; background-color:#ffffff;} 
 
:rocker:I've tried setting it to TD before, but all it does is create borders around each table data taking away the sexy one-pixel look (because now they're all bunched together).Oh, wait, I've figured it out. Here's how I've done it: 
 
TABLE {border:solid; border-width:1px; border-top:0px; border-left:0px; border-color:#000000; background-color:#ffffff} 
TD {border-top:1px solid; border-left:1px solid} 
 
Now can someone tell me if there's an easier way to do that, or if they've had compatibility issues with that code? Thanks.

Table Border Issue

liunx

Guest