0

For better visual experience i use a CSS style on a <tr> when hovering over it.

to see the complete design: http://jsfiddle.net/rDjE3/1/

i used:

.table_test tr:hover { outline: none; border-color: #29EC24; box-shadow: 0 0 10px #29EC24; }

this works fine in firefox.

but in Internet Explorer the hover gets displayed not complete (just between the <td>) and in Google Chrome completely nothing is displayed.

Why?

HKK
  • 237
  • 1
  • 3
  • 17

1 Answers1

1

First of all it seems it's a official bug for Chrome. As stated here the only way to do this is by setting 'display: block' on the <tr> element, which requires you to fix the positioning afterwards.

Also, box-shadow requires you to use the -webkit- prefix for Chrome. You can see a 'working' and malformed example here. But you'll have to set the width of the table cells by yourself.

Community
  • 1
  • 1
Hristo Valkanov
  • 1,689
  • 22
  • 33
  • http://jsfiddle.net/rDjE3/3/ take a look what happens now when you add a new `` – HKK Jun 08 '14 at 13:54
  • they overlap, and one stays on top of the others. I added z-index to the trstyle class. Check this out: http://jsfiddle.net/rDjE3/9/ – Hristo Valkanov Jun 08 '14 at 13:58