Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Regular Coder
    Join Date
    Sep 2011
    Posts
    184
    Thanks
    140
    Thanked 0 Times in 0 Posts

    Changing Table Row Color

    Hello,

    I can't seem, for the life of me to get this to work at all. I've tried everything out there and can't get it to work with IE 7:

    I would like to change the border color of my table row on hover.

    Code:
    <!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">
      
    .test {
    border:1px solid #9CA4AA
    }
    .test:hover { border:1px solid #666666 }
    
      </style>
     </head>
     <body>
    <table width="536" style="border:1px solid #9CA4AA" cellspacing="0" cellpadding="1">
    		<tr class="test">
    			<td>&nbsp;</td>
    		</tr>
    </table>
     </body>
    </html>
    I desperately need your help before I have no hair left.

    Thanks for all your help in advance,

    Cheers,

    J

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,014
    Thanks
    79
    Thanked 4,435 Times in 4,400 Posts
    The problem is that you can't apply a border to a <tr>.

    Go ahead. Try it:
    Code:
    <table width="536" style="border:1px solid #9CA4AA" cellspacing="0" cellpadding="1">
    <tr style="border: solid red 20px;">
    	<td>&nbsp;</td>
    </tr>
    </table>
    Nothing. you only get the 1px border from the <table>.

    Try this:
    Code:
    <!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">
    .test {
         border:1px solid #9CA4AA;
    }
    .test:hover { 
         border:1px solid #666666;
    }
    </style>
    </head>
    <body>
    <table width="536" style="border-collapse:collapse;" cellspacing="0" cellpadding="1">
    <tr>
        <td class="test">stuff</td>
    </tr>
    </table>
    </body>
    </html>
    Using border-collapse ensures that all the borders from the <td> cells will "run together" and look like a border for the over all tale.

    BUT...

    But of course if you actually have several columns and you want the entire *row* to change border color, then you'll have to use JS.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,014
    Thanks
    79
    Thanked 4,435 Times in 4,400 Posts
    Whooops!

    I just figured it out!
    Code:
    <!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">
      
    .test td {
        border: 4px solid #9CA4AA;
    }
    .test:hover td { 
        border: 4px solid #666666;
    }
    
      </style>
     </head>
     <body>
    <table width="536" style="border-collapse: collapse;" cellspacing="0" cellpadding="1">
    <tr class="test">
    	<td >put some text in here</td>
    	<td >put some text in here</td>
    </tr>
    </table>
    </body>
    </html>
    Will that work for you?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    Regular Coder
    Join Date
    Sep 2011
    Location
    Sweden
    Posts
    154
    Thanks
    1
    Thanked 22 Times in 22 Posts
    It's true that you can't use borders on tr:s.
    However you can use cascading (i.e. rules for descendants etc) with CSS (yep there's a point behind naming it Cascading Style Sheets).

    So I do not see how several columns would lead to javascript usage by necessity or the point of working with a class on the td:s

    Apply a class to tr:s or to the whole table instead:
    Code:
    <!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">
    .test {
      border-collapse:collapse
    }
    
    .test tr td {
      border:1px solid #9CA4AA;
      padding:3px
    }
    
    .test tr:hover td { 
     border:1px solid #666666;
    }
    </style>
    </head>
    <body>
    <table class="test" width="536"cellspacing="0" cellpadding="1">
    <tr><td>stuff</td><td>other stuff</td></tr>
    <tr><td>stuff 2</td><td>other stuff 2</td></tr>
    <tr><td>stuff 3</td><td>other stuff 3</td></tr>
    </table>
    </body>
    </html>

  • #5
    Regular Coder
    Join Date
    Sep 2011
    Location
    Sweden
    Posts
    154
    Thanks
    1
    Thanked 22 Times in 22 Posts
    Oops!
    Sorry, I didn't see your latest post Old Pedant , was busy writing mine...

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,014
    Thanks
    79
    Thanked 4,435 Times in 4,400 Posts
    What's nice is that we both realized that you need border-collapse on the table to make it work right.

    Now...there is a problem here.

    Suppose you wanted the border *around* the <tr> row to change color but you wanted the borders *between* <td> cells to stay the same.

    You can still do this, but you have to "special case" the left-most and right-most <td>s. That is, you have to leave the border-left and border-right alone on all cells except the left and right ones, where you change border-left on the leftmost and border-right on the rightmost.

    Still doable, but not as convenient.
    Last edited by Old Pedant; 09-29-2011 at 12:50 AM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,014
    Thanks
    79
    Thanked 4,435 Times in 4,400 Posts
    Like this, for example:
    Code:
    <!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">
       
    .test td {
        border: 4px solid green;
    }
    .test:hover td { 
        border-top: 4px solid red;
        border-bottom: 4px solid red;
    }
    .test:hover td:first-of-type {
        border-left: 4px solid red;
    }
    .test:hover td:last-of-type {
        border-right: 4px solid red;
    }
    
    
      </style>
     </head>
     <body>
    <table style="border-collapse: collapse;" cellspacing="0" cellpadding="1">
    <tr class="test">
    	<td >put some text in here</td>
    	<td >put some text in here</td>
    	<td >put some text in here</td>
    	<td >put some text in here</td>
    	<td >put some text in here</td>
    </tr>
    </table>
     </body>
    </html>
    But which doesn't work in MSIE 7 (not sure about MSIE 8). It doesn't understand the first-of-type or last-of-type selectors.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,014
    Thanks
    79
    Thanked 4,435 Times in 4,400 Posts
    Now...

    What the heck is this thread doing in the JAVASCRIPT forum???

    Maybe the moderators can move it to HTML/CSS?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    Regular Coder
    Join Date
    Sep 2011
    Posts
    184
    Thanks
    140
    Thanked 0 Times in 0 Posts
    Thank you so much for everyone's help! =)

    Because of the geniouses and experts here, I still have hair left on my head.

    Thanks again for the awesome help.

    Ps...Who do I write the cheque in the mail to


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •