...

View Full Version : Changing Table Row Color



jason_kelly
09-28-2011, 08:33 PM
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.



<!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

Old Pedant
09-28-2011, 10:02 PM
The problem is that you can't apply a border to a <tr>.

Go ahead. Try it:


<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:


<!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.

Old Pedant
09-28-2011, 10:05 PM
Whooops!

I just figured it out!


<!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?

ironboy
09-28-2011, 10:11 PM
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:
<!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>

ironboy
09-28-2011, 10:14 PM
Oops!
Sorry, I didn't see your latest post Old Pedant :thumbsup:, was busy writing mine...

Old Pedant
09-29-2011, 12:41 AM
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.

Old Pedant
09-29-2011, 12:49 AM
Like this, for example:


<!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.

Old Pedant
09-29-2011, 12:51 AM
Now...

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

Maybe the moderators can move it to HTML/CSS?

jason_kelly
09-29-2011, 01:58 AM
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;)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum