Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

table using css class missing its inside borders

Status
Not open for further replies.
jeff65

jeff65

MIS
Jun 27, 2003
2
US
I'm trying to use css with a table but the inside borders between the rows/columns are not displaying. Here's what I'm doing:
<STYLE TYPE=&quot;text/css&quot;>
<!-- TABLE.tabYes, TD.tabYes {border: 1px solid black; ; font-family: Arial, Helvetica, sans-serif; font-size: 13px; color:eek:range; } -->
</STYLE>

<TABLE id=&quot;testTab3&quot; class=&quot;tabYes&quot; >

How come the outside border shows but the borders within the table are not showing? I tried adding rules:all to tabYes and it didn't work. Thanks in advance for any help!

Jeff
 
Sort by date Sort by votes
<html><head>
<STYLE TYPE=&quot;text/css&quot;>
.tabYes {border: 1px solid black;
font-family: &quot;Arial&quot;, &quot;Helvetica&quot;, &quot;sans-serif&quot;;
font-size: 13px; color:eek:range}
</STYLE></head>
<body><table id=&quot;testTab3&quot; class=&quot;tabYes&quot;>
<tr><td class=&quot;tabYes&quot;>1</td><td class=&quot;tabYes&quot;>2</td></tr>
<tr><td class=&quot;tabYes&quot;>3</td><td class=&quot;tabYes&quot;>3</td></tr>
</table></body></html>

Clive
 
Upvote 0 Downvote
As Clive says, with the CSS you've posted you need to explicitly apply the tabYes class to each <td> in your table. An alternative is to change your CSS to explicity define the properties of <td>s within a <table class=tabYes> like this:
[tt]
<STYLE TYPE=&quot;text/css&quot;>
<!--
TABLE.tabYes,
TABLE.tabYes TR TD {
border: 1px solid black;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color:eek:range; }
-->
</STYLE>
[/tt]


-- Chris Hunt
Extra Connections Ltd

The real world's OK for a visit, but you wouldn't want to LIVE there!
 
Upvote 0 Downvote
Thanks for the info guys. Actually what I am trying to do is dynamically remove the table border. The problem I am having is that the CSS table info is not behaving like the original table. I guess the first question is how can I get CSS to look like the this:
<html>
<HEAD>
<STYLE TYPE=&quot;text/css&quot;>
<!--
TABLE.tabNo {border: none ; font-family: Arial; font-size: 13px; }
TABLE.tabYes {border: 1px solid black;}
TH.tabYes {border: 1px solid black;}
TD.tabYes {border: 1px solid black;} -->
</STYLE>
</HEAD>
<BODY BGCOLOR=&quot;#CEEFDB&quot;>
<TABLE border=&quot;1&quot; FRAME=&quot;box&quot; BGCOLOR=&quot;#FFFFFF&quot;>
<!-- <TABLE class=&quot;tabYes&quot; BGCOLOR=&quot;#FFFFFF&quot;> -->
<TR>
<TH > AAA </TH>
<TH >BBB</TH>
</TR>
<TR>
<TD> YYY </TD>
<TD> ZZZ </TD>
</TR>

</TABLE>
</body>
</html>

How can I use CSS to get it to look like this:
<TABLE border=&quot;1&quot; FRAME=&quot;box&quot; BGCOLOR=&quot;#FFFFFF&quot;>


 
Upvote 0 Downvote
I think the exact way in which an unstyled table is rendered is browser-dependent. Here's my attempt to emulate the 3D effect on IE (though I didn't bother to find out exactly which shades of grey to use):
[tt]
<html>
<HEAD>
<STYLE TYPE=&quot;text/css&quot;>
<!--
TABLE.tabNo {border: none ; font-family: Arial; font-size: 13px; }
TABLE.tabYes {
border-top: 1px solid #CCCCCC;
border-right: 1px solid #666666;
border-bottom: 1px solid #666666;
border-left: 1px solid #CCCCCC;
}
TABLE.tabYes TR TD,
TABLE.tabYes TR TH {
border-top: 1px solid #666666;
border-right: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
border-left: 1px solid #666666;
}
-->
</STYLE>
</HEAD>
<BODY BGCOLOR=&quot;#CEEFDB&quot;>
<!-- <TABLE border=&quot;1&quot; FRAME=&quot;box&quot; BGCOLOR=&quot;#FFFFFF&quot;> -->
<TABLE class=&quot;tabYes&quot; BGCOLOR=&quot;#FFFFFF&quot;>
<TR>
<TH > AAA </TH>
<TH >BBB</TH>
</TR>
<TR>
<TD> YYY </TD>
<TD> ZZZ </TD>
</TR>
</TABLE>
</body>
[/tt]

-- Chris Hunt
Extra Connections Ltd

The real world's OK for a visit, but you wouldn't want to LIVE there!
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
766
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
610
PeDa
PeDa
198709km
  • Locked
  • Question
Grouping XML key value using XSLT
Replies
0
Views
629
198709km
198709km
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
649
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top