Change borders in table cells

Question

I have a very simple HTML table as shown below:

<table> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> </tr><!-- Table Row --> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </tbody> </table> 

which I want, when I hover over each of the cells, the borders of the cell could change color. So I wrote the following CSS trying to achieve the effect:

 table{ position: absolute; font-family:Arial, Helvetica, sans-serif; color:white; font-size:12px; border:white 1px solid; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; -moz-box-shadow: 0 1px 2px #d1d1d1; -webkit-box-shadow: 0 1px 2px #d1d1d1; box-shadow: 0 1px 2px #d1d1d1; width: 100%; height: 100%%; } table tr { text-align: center; padding-left:20px; } table td { padding:18px; border-top: 1px solid #ffffff; border-bottom:1px solid #e0e0e0; border-left: 1px solid #e0e0e0; width: 33%; height: 50%; background-color: black; } table td:hover{ border:blue 1px solid; } 

This code works, but not perfect. It works fine when I was pointing at cells 1, 2, 3 (as indicated in the html), BUT, when I was pointing, for example, at cell 4 5 6, the upper bound cells not showing blue. I think that their upper borders overlap with the lower borders of the cells above.

Is there a problem with this problem?

Answer 1

When resetting the boundary collapse, the solution will be to use the insert border for all cells and the solid border for the cell that is hovering over the mouse. Here's the suggested CSS in action: http://jsfiddle.net/QmHGG/

The following is the CSS that was applied to the table:

 table, tr, td { border: 1px inset black; border-collapse: collapse; border-spacing: 0; } td:hover { border: 1px solid red; }