dgooding
asked on
CSS Table Border, Easy Points
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!
<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!
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 :-)
<style type="text/css">
table { border:1px solid #000000;border-collapse: collapse; border-spacing:0;}
td { border:1px solid #000000;}
</style>
~Stu :-)
ASKER
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.
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.
-- Put that after the </head> tag but before the <body> tag
~Stu :-)
~Stu :-)
<!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>
"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>
ASKER
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)?
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)?
>>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>
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>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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)....
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)....
ASKER
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.
Glad to help, and thanks! seanpowell must've been typing when I was typing :-p
ASKER
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 !!
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 !!
I wondered what that sound was :-)
<!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> </td>
<td> </td>
</tr>
</table>
</body>
</html>