Page 1 of 1

Table row borders angering me

Posted: Thu Aug 24, 2006 8:25 pm
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

Posted: Fri Aug 25, 2006 1:11 am
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/