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

Question

任何人都可以看看我的代码，并告诉我如何在列的两侧使用阴影框。现在我在列上有阴影。但它不是无缝的。 我希望它与我在列上悬停时的完全一样。如果有人有任何建议，请告诉我。 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链接，如果任何人想要查看：https://codepen.io/ajitdas/pen/XMBoqZ

Answer 1

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

这可能会帮助，好像你可能会遇到的问题，并有不同风格的多个答案。

希望这会有所帮助。