asked on

CSS - Table border, padding and TD border all different colors

I have a one cell Table, in which I want the border to be 1 px black, then a grey padded area inside that up to the TD, which needs to have a 1 px blue border. So from outside to inside it goes like this --

1px black Table border - 5px gray table background - 1px blue TD border - light blue TD background

I can do this easily with nested tables, but want to do with CSS only, and having trouble getting it right.

Please use table.Tclick and TD.Dclick as the classes. Show me the CSS and HTML code to do this simply. Thanks

ASKER CERTIFIED SOLUTION

GrandSchtroumpf

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

GrandSchtroumpf

Oooops,

border-spacing: 4px;

should be

border-spacing: 5px;

=)

scrathcyboy

ASKER

OK, I better give what I have as a starting point, because the 5 PX gray area is coming up fine in IE, but it is not showing at all in Mozilla Firefox. And the TD border is showing up in neither -- here is the code so far --

table.Tclick {border:solid 1px; border-color:#000000; background-color:#CCCCCC; border-collapse:collapse;}
TD.Dclick {border:solid 1px; border-color:#000088; padding:3px;}

<TABLE width="110" height="50" class="Tclick" cellpadding="5" cellspacing="5">
<TBODY>
<TR>
<TD align="center" valign="middle" bgcolor="#eeeeff" class="Dclick"><FONT size="2" face="Arial">Info here</FONT></TD>
</TR>
</TBODY>
</TABLE>

scrathcyboy

ASKER

HEY I GOT IT -- THIS WORKS IN BOTH IE AND MOZILLA/FIREFOX !!!

table.Tclick {border:solid 1px; border-color:#000000; background-color:#CCCCCC; border-collapse:collapse;}
TD.Tclick {border-width:1px; border-style: solid; border-color:#000088; background-color:#f0f0ff; padding:3px;}

<TABLE width="110" height="50" cellpadding="5" cellspacing="5" class="click" >
<TBODY>
<TR>
<TD align="center" valign="middle" class="click"><FONT color="#0000DD" size="2" face="Arial">Cell Info</FONT></TD>
</TR>
</TBODY>
</TABLE>

Anyone else struggling with this complex code, start with what I list above, and go from there. It WORKS!!

I am giving points to GrandSchtroumpf so this question can stay in the database. It is a tricky one