Freezing first row while highlighting row and column

Question

I need to do a table where I need to freeze the top row and highlight the row and column on hover. I have the 2 working separately but when I combine them, it isn't working right.

#table_grid {
  border-spacing: 0;
  border-collapse: collapse;
  overflow: hidden;
  font-family: arial, verdana, sans-serif;
  font-size: 12px;
  background: #fff;
  margin: 0px;
  text-align: left;
  max-width: 1200px;
  border-radius: 10px;
}

#table_grid td,
th {
  color: #669;
  padding: 9px 8px 4px 8px;
  font-size: 13px;
  position: relative;
}

#table_grid tr:hover {
  background-color: rgba(220, 220, 220, 0.5);
}

#table_grid td:hover::after,
th:hover::after {
  background-color: rgba(211, 211, 211, 0.2);
  content: '\00a0';
  height: 10000px;
  left: 0;
  position: absolute;
  top: -5000px;
  width: 100%;
  pointer-events: none;
}

table {
  text-align: left;
  position: relative;
  border-collapse: collapse;
}

th,
td {
  padding: 0.25rem;
}

th {
  background: white;
  position: sticky;
  top: 0;
  /* Don't forget this, required for the stickiness */
  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
}


  
    test
    test
    test
    test
    test
    test
  
  
    test
    test
    test
    test
    test
    test
  
  
    test
    test
    test
    test
    test
    test
  
  
    test
    test
    test
    test
    test
    test
  
  
    test
    test
    test
    test
    test
    test
  
  
    test
    test
    test
    test
    test
    test
  
  
    test
    test
    test
    test
    test
    test
  
  
    test
    test
    test
    test
    test
    test
  
  
    test
    test
    test
    test
    test
    test
  
  
    test
    test
    test
    test
    test
    test
  
  
    test
    test
    test
    test
    test
    test
  
  
    test
    test
    test
    test
    test
    test
  
  
    test
    test
    test
    test
    test
    test
  
  
    test
    test
    test
    test
    test
    test
  
  
    test
    test
    test
    test
    test
    test
  
  
    test
    test
    test
    test
    test
    test
  
  
    test
    test
    test
    test
    test
    test
  
  
    test
    test
    test
    test
    test
    test
  
  
    test
    test
    test
    test
    test
    test
  
  
    test
    test
    test
    test
    test
    test
  
  
    test
    test
    test
    test
    test
    test
  
  
    test
    test
    test
    test
    test
    test
  
  
    test
    test
    test
    test
    test
    test
  
  
    test
    test
    test
    test
    test
    test
  
  
    test
    test
    test
    test
    test
    test
  
  
    test
    test
    test
    test
    test
    test
  
  
    test
    test
    test
    test
    test
    test
  
  
    test
    test
    test
    test
    test
    test
  
  
    test
    test
    test
    test
    test
    test
  
  
    test
    test
    test
    test
    test
    test
  
  
    test
    test
    test
    test
    test
    test
  
  
    test
    test
    test
    test
    test
    test
  
  
    test
    test
    test
    test
    test
    test
  
  
    test
    test
    test
    test
    test
    test
  
  
    test
    test
    test
    test
    test
    test
  
  
    test
    test
    test
    test
    test
    test
  
  
    test
    test
    test
    test
    test
    test
  
  
    test
    test
    test
    test
    test
    test
  
  
    test
    test
    test
    test
    test
    test
  
  
    test
    test
    test
    test
    test
    test
  
  
    test
    test
    test
    test
    test
    test
  
  
    test
    test
    test
    test
    test
    test
  
  
    test
    test
    test
    test
    test
    test
  
  
    test
    test
    test
    test
    test
    test
  
  
    test
    test
    test
    test
    test
    test
  
  
    test
    test
    test
    test
    test
    test
  
  
    test
    test
    test
    test
    test
    test
  
  
    test
    test
    test
    test
    test
    test
  
  
    test
    test
    test
    test
    test
    test
  
  
    test
    test
    test
    test
    test
    test
  
  
    test
    test
    test
    test
    test
    test
  
  
    test
    test
    test
    test
    test
    test
  
  
    test
    test
    test
    test
    test
    test
  
  
    test
    test
    test
    test
    test
    test
  
  
    test
    test
    test
    test
    test
    test
  
  
    test
    test
    test
    test
    test
    test
  
  
    test
    test
    test
    test
    test
    test
  
  
    test
    test
    test
    test
    test
    test
  
  
    test
    test
    test
    test
    test
    test
  
  
    test
    test
    test
    test
    test
    test
  
  
    test
    test
    test
    test
    test
    test
  
  
    test
    test
    test
    test
    test
    test
  
  
    test
    test
    test
    test
    test
    test
  
  
    test
    test
    test
    test
    test
    test
  
  
    test
    test
    test
    test
    test
    test

If I change

overflow: hidden

to

overflow: auto

in #table_grid, the highlight on hover and freezing the first row is working but the hightlight on hover is running off the screen.

If I change it back to

overflow: hidden

Hightlight on hover is working properly but the first row is not freezing.

Is there any way to fix this?

Freezing first row while highlighting row and column

0 Answers