Контейнер div с фоновым цветом скрывает ячейки таблицы

Question

Я пытался создать стиль tr hover, который применяет эффект box-shadow к строке, которую вы наводите, и я обнаружил, что решение, которое я принял, не работает, если я помещу таблицу в div, которыйимеет цвет фона.Это очевидно, потому что у td есть z-index : -1, но это был единственный способ, который я нашел, чтобы заставить box-shadow работать.

Любые идеи, как заставить таблицу появиться, и сохранить box-shadowстиль при зависании?

Я воспроизвел это здесь: https://jsfiddle.net/pjz43a52/5/

Answer 1

Дайте самой таблице z-индекс, чтобы создать дополнительный «слой» между таблицей и элементом div, в котором может находиться ячейка таблицы с отрицательным z-индексом, чтобы она не скрывалась зафон div.

table {
  position: relative;
  z-index: 1;
  border-spacing: 0px;
  border-bottom: 1px solid black;
}

https://jsfiddle.net/pjz43a52/6/

Answer 2

Это потому, что tds имеют z-индекс -1, поэтому они отображаются ниже контейнера div.

Чтобы исправить это, мы должны указать контейнер div и элемент <table> position: relative, а для .container указать z-index: 0 и <table> для z-index: 1.

Эти z-индексы заставят таблицу и ее дочерние элементы отображаться над контейнером.Индекс td все еще будет ниже строки, но теперь он будет отображаться над контейнером.

Answer 3

Я думаю, вы хотите, чтобы td появлялись при наведении, верно?Просто добавьте еще одну строку, сбросьте z-index больше 0 при наведении курсора.

table tr: hover {z-index: 1;}