Почему Google Chrome не понимает css стили таблицы?

Question

[Айдар]

Здравствуйте! На лисе все норм, а на хроме не отображается стиль hover для столбца. Там при наведении должен подсвечиваться столбец и строка, образуя перекрестие. А в хроме только строка, а столбец как-то криво.Как исправить?
codepen.io/anon/pen/PGxxEG

UPD: Брал здесь codepen.io/dnzl/pen/XJZNwX
Там в хроме норм,но мне нужно строки переменно раскрасить (каждую вторую в серый), вот в этом весь и затык

Answer 1

[Александр]

поигрался с z-index, всеравно кривовато....

table {
  overflow: hidden;
  border: 1px solid#22A2D1;
  background: #B8E0F0;
  position: relative; 
  z-index:9;
  font-size: 12px;
  text-align: center;
}
tbody tr {
    background: #f6f6f6;
}
tbody tr:nth-child(2n) {
    background: #e6e3e3;
}
thead {
  background: #22A2D1;
  color: #FFF;
}
td,th {
  padding: 10px;
  position: relative;
  outline: 0;
  z-index: 1;
}
body:not(.nohover) tbody tr:hover {
  background: #22a2d1;  
}
td:hover::after,
thead th:not(:empty):hover::after,
td:focus::after,
thead th:not(:empty):focus::after { 
  content: '';  
  height: 10000px;
  left: 0;
  position: absolute;  
  top: -5000px;
  width: 100%;
  z-index: -1;  
}
td:hover::after,
th:hover::after {
  background: #22a241; 
  z-index:-1;
}
/* Focus stuff for mobile */
td:focus::before,
tbody th:focus::before {
  background: #22a2d1;  
  content: '';  
  height: 100%;
  top: 0;
  left: -5000px;
  position: absolute;  
  width: 10000px;
  z-index: -1;  
}
th:not(.nohover) {
  z-index:2;
}
th:hover{
  z-index:0;
}
td:hover{
  color:#ff9900;
  font-weight:bold;
  font-size:1.5em;
  padding:0px;
}

Comments

[Айдар]

Александр я тоже так игрался, но да....верхние ячейки закрашиваются поверх значений. Интересно,есть какой нибудь универсальный способ

[Айдар]

Александр брал здесь codepen.io/dnzl/pen/XJZNwX
Там в хроме норм,но мне нужно строки переменно раскрасить (каждую вторую в серый), вот в этом весь и затык.