Solved

CSS Table Border, Easy Points

Posted on 2004-04-05
14
1,674 Views
Last Modified: 2012-05-04
I have a page setup using tables (not frames).  Inside the "body" cell, I have another table.  I want the interior table to have a 1 pixel black border around each cell and around the outside of the table.  I know this can be done via CSS.  What I have right now is rather cumbersome, and I'd like a cleaner solution.

<table style="border-collapse: collapse; border:1px solid #000000;">
  <tr>
    <td style="border:1px solid #000000;"></td>
    <td style="border:1px solid #000000;"></td>
    ....
</table>

The ideal solution would be that I could just write:
  <table class=onepixel>
    <tr>
      <td></td>
      ...
  </table
and be done with it.

I can't just put
  TABLE   { border-collapse: collapse;}
  TD {border:1px solid #000000;}
in my style sheet because that would affect the outer table (which needs to be competely transparent).

Thanks in advance!
0
Comment
Question by:dgooding
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 5
  • 2
  • +1
14 Comments
 
LVL 31

Expert Comment

by:seanpowell
ID: 10760696
I don't follow you - you do want an outside border or you don't ?


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

<style type="text/css">

table { border:1px solid #000;}
td    { border:1px solid #000;}

</style>

</head>
<body>

<table>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

</body>
</html>
0
 
LVL 10

Expert Comment

by:stu215
ID: 10760759
I think this is what your looking for ....


<style type="text/css">

table { border:1px solid #000000;border-collapse: collapse; border-spacing:0;}
td    { border:1px solid #000000;}

</style>

~Stu :-)
0
 
LVL 2

Author Comment

by:dgooding
ID: 10760764
Well.  Yes and no.  Yes I want an outside border on the interior table, but not exterior table.  

Here's the basic layout of the two tables (they're more complicated than this, but just so you get the idea).

<table>         <------ outside table  (no borders whatsoever)
  <tr>
    <td>
      menu
    </td>
  </tr>
  <tr>
    <td>
      body
          <table>         <------ inside table   (one pixel collapsed borders inside and out)
            <tr>
              <td>
                data
              </td>
            </tr>
          </table>
      /body
    </td>
  </tr>
</table>

So just doing the
  <style type="text/css">
    table { border:1px solid #000;}
    td    { border:1px solid #000;}
  </style>
will affect the outsite table (not ok).  Just the inside table needs borders.
0
How our DevOps Teams Maximize Uptime

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us. Read the use case whitepaper.

 
LVL 10

Expert Comment

by:stu215
ID: 10760775
-- Put that after the </head> tag but before the <body> tag

~Stu :-)
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10760794
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>

<style type="text/css">

.border { border:1px solid #000;}

</style>

</head>
<body>

<table>
  <tr>
    <td>menu</td>
  </tr>
  <tr>
    <td>
      body
          <table class="border">
            <tr>
              <td class="border">data </td>
            </tr>
          </table>
      </body
    </td>
  </tr>
</table>


</body>
</html>
0
 
LVL 2

Author Comment

by:dgooding
ID: 10760883
seanpowell is basically correct...  :)  two things...  

is there a way to do it without also having to define the class in the <td>?  

can you define an object to have two class types (that deal with different attributes)?  
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10760907
>>is there a way to do it without also having to define the class in the <td>?

Yes, see below.

>>can you define an object to have two class types (that deal with different attributes)?  

Yes, see below again.


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

<style type="text/css">

table td table, table td table td { border:1px solid #000;}

table td table td { background-color:#ccc;}

</style>

</head>
<body>

<table class="noborder">
  <tr>
    <td>menu</td>
  </tr>
  <tr>
    <td>
      body
          <table>
            <tr>
              <td class="border">data </td>
            </tr>
          </table>
      </body
    </td>
  </tr>
</table>


</body>
</html>
0
 
LVL 31

Accepted Solution

by:
seanpowell earned 125 total points
ID: 10760926
table td table, table td table td { border:1px solid #000;}

This means, look for a table within a table and give it a border - AND - look for a td within a table within a table and give it a border :-)
0
 
LVL 4

Assisted Solution

by:monolith_888
monolith_888 earned 75 total points
ID: 10760954
You're looking for this:
TD within a TABLE within a TABLE.
This will affect all TD's inside a double nested TABLE structure, without having to define classes.

<style>
table table td {border:1px solid #000;}
</style>

For that add-on, yes you can have two class types in an object, just seperate the class names with a space:
<style>
.style1 {font-family:tahoma;}
.style2 {font-weight:bold;}
</style>
<span class="style1 style2">blah</span>

Cheers!
Blake
0
 
LVL 2

Author Comment

by:dgooding
ID: 10760955
That's cool.  I've never seen that before.  
I suppose the class="border" and class="noborder" are artifacts of previous attempts?  I removed them and it worked fine (since they aren't defined in the style)....

0
 
LVL 2

Author Comment

by:dgooding
ID: 10760999
Increasing points so that both monolith and seanpowell can have a decent amount.  Both of you showed me things I've never seen before.  Nicely done.
0
 
LVL 4

Expert Comment

by:monolith_888
ID: 10761173
Glad to help, and thanks!  seanpowell must've been typing when I was typing :-p
0
 
LVL 2

Author Comment

by:dgooding
ID: 10761188
Yup!   :)

Had to give seanpowell a few more points, cause his was posted first, and was correct.  But I just couldn't let a good answer go to waste !!
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10761189
I wondered what that sound was :-)
0

Featured Post

SharePoint Admin?

Enable Your Employees To Focus On The Core With Intuitive Onscreen Guidance That is With You At The Moment of Need.

Question has a verified solution.

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

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
Viewers will get an overview of the benefits and risks of using Bitcoin to accept payments. What Bitcoin is: Legality: Risks: Benefits: Which businesses are best suited?: Other things you should know: How to get started:
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…

729 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