如何在表格的左侧和右侧添加阴影

Question

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.

  <style type="text/css">
    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;
  }

  </style>


  <main>
    <table>
      <thead>
        <tr>
          <th></th>
          <th class="col active">50kg</th>
          <th class="col">55kg</th>
          <th class="col">60kg</th>
          <th class="col">65kg</th>
          <th class="col">70kg</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th class="row">160cm</th>
          <td class="active">20</td>
          <td>21</td>
          <td>23</td>
          <td>25</td>
          <td>27</td>
        </tr>

        <tr>
          <th class="row">165cm</th>
          <td class="active">18</td>
          <td>20</td>
          <td>22</td>
          <td>24</td>
          <td>26</td>
        </tr>
      <tbody>
    </table>
  </main>

codepen link if anyone like to view : https://codepen.io/ajitdas/pen/XMBoqZ

Answer 1

How to get box-shadow on left & right sides only

This may help, it seems like the problem you may be having and there are multiple answers for different styles.

Hope this helps.