表格行和列高亮显示

html代码:

  <table>
    <thead>
      <tr>
        <th></th>
        <th class="col">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>20</td>
        <td>21</td>
        <td>23</td>
        <td>25</td>
        <td>27</td>
      </tr>

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

      <tr>
        <th class="row">170cm</th>
        <td>17</td>
        <td>19</td>
        <td>21</td>
        <td>23</td>
        <td>25</td>
      </tr>

      <tr>
        <th class="row">175cm</th>
        <td>16</td>
        <td>18</td>
        <td>20</td>
        <td>22</td>
        <td>24</td>
      </tr>
    <tbody>
  </table>

核心css代码:

table {
    overflow: hidden;
}
td, th {
    position: relative;
}
tr:hover {
    background-color: #ffa;
}
td:hover::after,
th:hover::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 10000px;
    left: 0;
    top: -5000px;
    background-color: #ffa;
    z-index: -1;
}