[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

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

Posted on 2006-05-23
4
Medium Priority
?
3,575 Views
Last Modified: 2012-05-05
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
0
Comment
Question by:scrathcyboy
  • 2
  • 2
4 Comments
 
LVL 30

Accepted Solution

by:
GrandSchtroumpf earned 750 total points
ID: 16747397
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
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 16747410
Oooops,

  border-spacing: 4px;

should be

  border-spacing: 5px;

=)
0
 
LVL 44

Author Comment

by:scrathcyboy
ID: 16747425
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
 
LVL 44

Author Comment

by:scrathcyboy
ID: 16747507
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

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses
Course of the Month19 days, 10 hours left to enroll

873 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question