表格行和列同时高亮显示

最新推荐文章于 2024-03-01 16:22:18 发布

Wangdanting123

最新推荐文章于 2024-03-01 16:22:18 发布

阅读量1.3k

点赞数 1

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>

css:

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