Table two way hoverable react

I want my table to be two way hoverable like this:

Right now my css is

 tr {
        &:hover {
          background-color: #f1efeb;
        }
        &:first-child {
          z-index: 1;
          position: relative;
        }
        &:not(:first-child) {
          td {
            &:not(:first-child) {
              &:hover {
                &::after {
                  background-color: #f1efeb;
                  content: '';
                  height: 10000px;
                  left: 0;
                  position: absolute;
                  top: -5000px;
                  width: 100%;
                  z-index: -1;
                }
              }
            }
          }
        }
        padding-bottom: 5rem;
        td {
          padding: 12px;
          vertical-align: text-top;
          position: relative;
          word-wrap: break-word;
        }
      }

Using this css only the row is highlighted, I want to highlight column as well. P.S. First column and first row should not be highlighted while hovering. Thanks in advance