Impossible? HTML <TD> mouseover border-color change with border-collapse?

Question

Hello

I have wish to have a table where all borders (internal/external) are a single pixel in width, I achieve this by setting the border-collapse style on the table.

Then I wish to onmouseover each TD cell, changing the border-color to a different color. This works fine if the table border has not been collapsed. But if you collapse the border then it fails to work.

However if I don't collapse the border then I can't get a single pixel width border!

So is this impossible?

EDIT: To clarify, when using border-collapse, and setting TD border color, only the right and bottom border are set.

EDIT EDIT: I ended up implementing this changing the background on mouseover. The background GIF is a white box with a border. UUUUGGH! Works perfectly in all browsers though ...

Answer 1

Is there any way you can forego the use of a table altogether and use divs instead? It's a little more painful as far as the initial set-up goes, but in the end I think you might find that it's easier to manipulate in the long-run.

Answer 2

I realize this is a really old post, but thought I'd contribute anyway in case it is helpful.

Don't know how you got a background image w/border to work unless you're using pixel-precise widths and heights for all table cells?

But another option is to use "outline" instead of border on hover. Ex.:

table { border-collapse: collapse; }
table td { border: solid 1px gray; }
table td:hover { border: none; outline: solid 1px red; }

Works in all browsers except IE6.

Depending on the color you use, the appearance might not be ideal but it works pretty well.