0

I have a table, and I want to set some styling when you hover a row, so I used box-shadow, and added the corresponding z-index to make this work. The problem is that when I set the tds to have a background color, it just makes it be on top of the box-shadow, and therefore the hover does not work.

How can I fix this so that I can have both a background-color in the td elements, and do the box-shadow style when hovering on a row?

I reproduced it in this simple jsfiddle: https://jsfiddle.net/pjz43a52/

Check that when you hover on a row, the box-shadow is behind the other rows. If you comment the line for the td background-color, it just works:

table td {
  /* background-color: #EFEFEF; */
  z-index: 1;
}

Any ideas why would this happen?

Pablo Matias Gomez
  • 6,614
  • 7
  • 38
  • 72
  • Possible duplicate of [Box Shadow on table row not appearing on certain browsers](https://stackoverflow.com/questions/10874985/box-shadow-on-table-row-not-appearing-on-certain-browsers) – larsmagnus Oct 05 '18 at 03:24

1 Answers1

2

This happens because td is a child of tr. When your CSS sets tr to have a higher z-index than td on hover, it will be rendered above the surrounding cells so you can see the shadow cast on its neighbours. However no shadow can be cast on its own child td as they are also raised with their parent.

You need to set your parent row to appear above its own children. One way you might achieve this is by setting td z-index to -1 and removing all z-indexes from tr. Doing this does make the row's shadow to display over top of all cells, including its own children, but in both Chrome and Firefox the rendering is awful.

To get this to work you must also ensure that every element affected by a z-index change has its position property set to non static.

table tr {
  position: relative;
}

table td {
  position:relative;
  background-color: #EFEFEF;
  z-index: -1;
}

table tr:hover {
  position: relative;
  box-shadow: 
    inset 5px 0 0 #dadce0, 
    inset -3px 0 0 #dadce0, 
    0 5px 2px 0 rgba(60,64,67,.3), 
    0 5px 3px 1px rgba(60,64,67,.15);
}
jla
  • 4,191
  • 3
  • 27
  • 44
  • I am having a different problem now, it seems that when the table is inside a div that has a background color, the tds are not visible. Check this example: https://jsfiddle.net/pjz43a52/5/ – Pablo Matias Gomez Oct 09 '18 at 01:21
  • @PabloMatiasGomez this is because the `td`s have a z-index of -1 so they are being rendered below the container div. To fix this you must give both your container div and your `` element `position: relative`, and set `.container` to have a z-index of 0 and `
    ` to have a z-index of 1. These z-indexes will force the table and its children to render above the container. The `td`'s index will still be below the row, but it will now be displayed above the container.
     – jla Oct 09 '18 at 02:31