title: how do i add shadow on left and right side of column of table
body: <p>can anyone please take a look at my code and can tell me how to use shadow box on both side of the column. right now i have shadow on the column. but its not seamless.
  I want it to be exactly like the same i have for the column when i hover over it.If anyone have any suggestion please let me know. Ty.</p>
  
  <pre><code>  &lt;style type="text/css"&gt;
      table {
      overflow: hidden;
    }
  
    td, th {
      padding: 10px;
      position: relative;
      outline: 0;
    }
  
    /* body:not(.nohover) tbody tr:hover {
      background-color: #ffa;
    } */
  
    td:hover::after,
  
    td:focus::after
     { 
      content: '';  
      height: 10000px;
      left: 0;
      position: absolute;  
      top: -5000px;
      width: 100%;
      z-index: -1;
    }
  
    td:hover::after,
    th:hover::after {
       background: #eff1f5;
        box-shadow: 0px -2px 21px 3px rgba(0, 0, 0, 0.23);
    }
  
    .active{
       background: #eff1f5;
  
      }
    td:focus::after,
    th:focus::after {
      background-color: lightblue;
    }
  
    /* Focus stuff for mobile */
    /* td:focus::before, */
    tbody th:focus::before {
      background-color: lightblue;
      content: '';  
      height: 100%;
      top: 0;
      left: -5000px;
      position: absolute;  
      width: 10000px;
      z-index: -1;
    }
  
    &lt;/style&gt;
  
  
    &lt;main&gt;
      &lt;table&gt;
        &lt;thead&gt;
          &lt;tr&gt;
            &lt;th&gt;&lt;/th&gt;
            &lt;th class="col active"&gt;50kg&lt;/th&gt;
            &lt;th class="col"&gt;55kg&lt;/th&gt;
            &lt;th class="col"&gt;60kg&lt;/th&gt;
            &lt;th class="col"&gt;65kg&lt;/th&gt;
            &lt;th class="col"&gt;70kg&lt;/th&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
          &lt;tr&gt;
            &lt;th class="row"&gt;160cm&lt;/th&gt;
            &lt;td class="active"&gt;20&lt;/td&gt;
            &lt;td&gt;21&lt;/td&gt;
            &lt;td&gt;23&lt;/td&gt;
            &lt;td&gt;25&lt;/td&gt;
            &lt;td&gt;27&lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;tr&gt;
            &lt;th class="row"&gt;165cm&lt;/th&gt;
            &lt;td class="active"&gt;18&lt;/td&gt;
            &lt;td&gt;20&lt;/td&gt;
            &lt;td&gt;22&lt;/td&gt;
            &lt;td&gt;24&lt;/td&gt;
            &lt;td&gt;26&lt;/td&gt;
          &lt;/tr&gt;
        &lt;tbody&gt;
      &lt;/table&gt;
    &lt;/main&gt;
  </code></pre>
  
  <p>codepen link if anyone like to view : <a href="https://codepen.io/ajitdas/pen/XMBoqZ" rel="nofollow noreferrer">https://codepen.io/ajitdas/pen/XMBoqZ</a></p>