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
LVL 44
scrathcyboyAsked:
Who is Participating?
 
GrandSchtroumpfConnect With a Mentor Commented:
If you want it to work in IE, the problem will be the 5px gray part.
You'll need to use the "cellspacing" html attribute:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">

body {
  background-color: #ddd;
  color: black;
}

table {
  border: 1px solid black;
  background: silver;
  border-spacing: 4px;
}

td {
  border: 1px solid blue;
  background: white;
}

</style>
</head>
<body>

<table cellspacing="5"><tr><td>Hello</td></tr></table>

</body>
</html>
0
 
GrandSchtroumpfCommented:
Oooops,

  border-spacing: 4px;

should be

  border-spacing: 5px;

=)
0
 
scrathcyboyAuthor Commented:
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>
0
 
scrathcyboyAuthor Commented:
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
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.