Table row borders angering me

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
HiddenS3crets
Forum Contributor
Posts: 119
Joined: Fri Apr 22, 2005 12:23 pm
Location: USA

Table row borders angering me

Post by HiddenS3crets »

My goal is to have a table and when I hover over a table row, the background color changes (this part already works) and a border is displayed (not working).

This is my code (obviously messy, just for quick testing)

Code: Select all

<style type="text/css">
table {
        width: 99%;
        border-spacing: 0;
        border-collapse: collapse;
}

tr {
        border: 1px solid #fff;
}

tr:hover {
        background-color: #CBD3CA;
        border: 1px solid #000;
}
</style>

<table>
<tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
</tr>
<tr>
    <td>4</td>

    <td>5</td>
    <td>6</td>
</tr>
</table>
You can see it in action here: http://www.hiddenskills.net/temp.php

I am running into - from what i've read - is border conflicts.

I have tried manipulating css here and there, but nothing is working.

Note: When a tr is not hovered over, I do not want it to have any border. The border will only display when the mouse hovers over a certain table row.

Any ideas on how I can get this to work? 8O
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

IE doesn't support :hover on elements other than links. In modern browsers it does. My guess is you don't want to ignore IE, so your best bet is to use some javascript solution.

One article I remember which could be a starting point is http://www.alistapart.com/articles/zebratables/
Post Reply