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 strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

bottom-border and <tr> 2

Status
Not open for further replies.
Sam6284

Sam6284

Programmer
Apr 24, 2002
16
FR
I've ruled out browser/PC problems because I just tested an example from an earlier post on this site ("Can you place a class on a row - 10/30/03) which worked fine.

I get a bottom-border when I set the <td> class attribute but not so with <tr>. Does anyone see my error?

Code: 
<html>
  <head>
    <style>
      .color1
        {
        BORDER-BOTTOM: black 1px solid;
        background-color: #ffffdd;
        }

      .color2
        {
        BORDER-BOTTOM: black 1px solid;
        background-color: #eeffee;
        }
    </style>
  </head>
  <body>
    <table>
Code: 
<tr class='color1'>
[/code]
<td>First row of content</td>
</tr>
<tr>
[/code]
Code: 
<td class='color2'>
[/code]Second row of content</td>
</tr>
</table>
</body>
</html>
[/code]

Many thanks for your help.
 
Sort by date Sort by votes
Assigning the class to the call rather than the row is the easiest work around I can come up with... Other than that, I dont see why it wouldnt work the way you have it now.
 
Upvote 0 Downvote
One thing first, although you may not care..
If you want your code XHTML compliant, you have to use double quotes instead of single quotes.

Now for the problem.
First, try changing the CSS code include the TD, and TR in the declaration.

td.color1 {
border-bottom: black 1px solid;
background-color: #color;
}

If that doesn't work, try changing the CSS to
.color1 {
border-style: solid;
border-bottom: black 1px;
background-color: #color;
}
According to the W3 standards, within Internet Explorer (because their not up to par) you must include the border-style property if you are going to set the border width. That &quot;1px&quot; is the border-width although you didn't define it specifically with it's own attribute.

If none of that works.. just reply back..although it should.

 
Upvote 0 Downvote
From the W3C recommendation for HTML 4.01:
Rows, columns, row groups, and column groups cannot have borders (i.e., user agents must ignore the border properties for those elements).

And I was wondering why I, too could never get borders to work on rows.

Kevin
A+, Network+, MCP
 
Upvote 0 Downvote
So from that, you can't get row colors (TR), only table data colors (TD) ??

Now that I didn't know.
You get a cookie! :) (And a vote on the 'helpful post' feature.)

 
Upvote 0 Downvote
Well then, you're stuck doing it this way:
Code: 
<style>
      tr.color1 td
        {
        BORDER-BOTTOM: black 1px solid;
        background-color: #ffffdd;
        }

      tr.color2 td
        {
        BORDER-BOTTOM: black 1px solid;
        background-color: #eeffee;
        }
</style>

<table cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;	>
 <tr class=&quot;color1&quot;>
  <td>row 1 cell 1</td>
  <td>row 1 cell 2</td>
  <td>row 1 cell 3</td>
  <td>row 1 cell 4</td>
  <td>row 1 cell 5</td>
  <td>row 1 cell 6</td>
 </tr>
 <tr class=&quot;color2&quot;>
  <td>row 2 cell 1</td>
  <td>row 2 cell 2</td>
  <td>row 2 cell 3</td>
  <td>row 2 cell 4</td>
  <td>row 2 cell 5</td>
  <td>row 2 cell 6</td>
 </tr>
</table>
Hope it helps.
 
Upvote 0 Downvote
xWastedMindx, you can do other stuff with the table rows, like background-color and color but not border.

Thanks for the cookie :)



Kevin
A+, Network+, MCP
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
422
spamjim
spamjim
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
115
lmcate
lmcate
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
322
PeDa
PeDa
lupidol
  • Locked
  • Question
Table's title row's rounded corners border 1
Replies
2
Views
102
lupidol
lupidol
jason.lex
  • Locked
  • Question
Bootstrap grid and columns question
Replies
0
Views
63
jason.lex
jason.lex

Part and Inventory Search

Sponsor

Back
Top