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

这可能有所帮助，看起来您可能遇到的问题，并且针对不同的风格有多个答案。

希望这有帮助。

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

1 个答案: