Hover on column and rows, with multiple background colors

I know this can be done with rows, but I haven't been able to make it also work for columns. I need to be able to color code my columns, but keep the same hover color across all columns. Below is the code I have so far, I need to color the background on the 1st column grey, and leave everything else the same white. While keeping the same hover color across all rows and columns. Hope that makes sense!

Codepen

.grey-column {
  background-color: grey;
}

.data-table {
  overflow: hidden;
  border: solid black;
  border-collapse: collapse;
  border-width: 1px 2px 2px 1px;
}

.data-cell {
  padding: 10px;
  font-size: 14px;
  position: relative;
  border: solid black;
  border-width: 1px 1px 1px 1px;
}

.data-row:hover {
  padding: 10px;
  background-color: #ffa;
}

.data-cell::before {
  content: "";
  position: absolute;
  top: 0;
  left: -5000px;
  width: 10000px;
  height: 100%;
  z-index: -10;
}

.data-cell:hover::after {
  content: "";
  position: absolute;
  background-color: #ffa;
  left: 0;
  top: -5000px;
  height: 10000px;
  width: 100%;
  z-index: -5;
}

<table class="data-table">
  <tbody>
    <tr class="data-row">
      <td class="grey-column">I should change to hover color</td>
      <td class="data-cell">Cell 2</td>
      <td class="data-cell">Cell 3</td>
      <td class="data-cell">Cell 4</td>
    </tr>
    <tr class="data-row">
      <td class="grey-column">I should change to hover color</td>
      <td class="data-cell">Cell 2</td>
      <td class="data-cell">Cell 3</td>
      <td class="data-cell">Cell 4</td>
    </tr>
    <tr class="data-row">
      <td class="grey-column">I should change to hover color</td>
      <td class="data-cell">Cell 2</td>
      <td class="data-cell">Cell 3</td>
      <td class="data-cell">Cell 4</td>
    </tr>
  </tbody>
</table>

Solution

Updated

I think this will work for you.

I have removed the background .grey-column and added this style.

.grey-column:after {
  background-color: grey;
  position:absolute;
  left:0;
  right:0;
  z-index:-20;
  top:0;
  bottom:0;
  content:'';
 }
 .grey-column{
  position:relative;
 }

working sample for you.

.grey-column:after {
  background-color: grey;
  position:absolute;
  left:0;
  right:0;
  z-index:-20;
  top:0;
  bottom:0;
  content:'';
}
.grey-column{
 position:relative;
}

.data-table {
  overflow: hidden;
  border: solid black;
  border-collapse: collapse;
  border-width: 1px 2px 2px 1px;
}

.data-cell {
  padding: 10px;
  font-size: 14px;
  position: relative;
  border: solid black;
  border-width: 1px 1px 1px 1px;
}

.data-row:hover {
  padding: 10px;
  background-color: #ffa;
}

.data-cell::before {
  content: "";
  position: absolute;
  top: 0;
  left: -5000px;
  width: 10000px;
  height: 100%;
  z-index: -10;
}

.data-cell:hover::after,.grey-column:hover::after {
  content: "";
  position: absolute;
  background-color: #ffa;
  left: 0;
  top: -5000px;
  height: 10000px;
  width: 100%;
  z-index: -5;
}

<table class="data-table">
  <tbody>
    <tr class="data-row">
      <td class="grey-column">I should change to hover color</td>
      <td class="data-cell">Cell 2</td>
      <td class="data-cell">Cell 3</td>
      <td class="data-cell">Cell 4</td>
    </tr>
    <tr class="data-row">
      <td class="grey-column">I should change to hover color</td>
      <td class="data-cell">Cell 2</td>
      <td class="data-cell">Cell 3</td>
      <td class="data-cell">Cell 4</td>
    </tr>
    <tr class="data-row">
      <td class="grey-column">I should change to hover color</td>
      <td class="data-cell">Cell 2</td>
      <td class="data-cell">Cell 3</td>
      <td class="data-cell">Cell 4</td>
    </tr>
  </tbody>
</table>

IF there is any doubt please do ask. Hope this was helpful for you.