title: Hover on column and rows, with multiple background colors
body: <p>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!</p>
  
  <p><a href="https://codepen.io/fazulk/pen/LzvKPo" rel="nofollow noreferrer">Codepen</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table class="data-table"&gt;
    &lt;tbody&gt;
      &lt;tr class="data-row"&gt;
        &lt;td class="grey-column"&gt;I should change to hover color&lt;/td&gt;
        &lt;td class="data-cell"&gt;Cell 2&lt;/td&gt;
        &lt;td class="data-cell"&gt;Cell 3&lt;/td&gt;
        &lt;td class="data-cell"&gt;Cell 4&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="data-row"&gt;
        &lt;td class="grey-column"&gt;I should change to hover color&lt;/td&gt;
        &lt;td class="data-cell"&gt;Cell 2&lt;/td&gt;
        &lt;td class="data-cell"&gt;Cell 3&lt;/td&gt;
        &lt;td class="data-cell"&gt;Cell 4&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="data-row"&gt;
        &lt;td class="grey-column"&gt;I should change to hover color&lt;/td&gt;
        &lt;td class="data-cell"&gt;Cell 2&lt;/td&gt;
        &lt;td class="data-cell"&gt;Cell 3&lt;/td&gt;
        &lt;td class="data-cell"&gt;Cell 4&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>