Comment mettre en surbrillance des lignes et des colonnes dans un tableau en survol à l'aide de CSS ?

Mise en surbrillance des lignes et des colonnes dans un tableau au survol à l'aide de CSS

Dans cette question, l'utilisateur vise à mettre en surbrillance à la fois une ligne et une colonne survolez un tableau HTML. Ils veulent que la surbrillance s'étende d'un axe à l'autre, se croisant au niveau de la cellule survolée.

Solution CSS

Voici une solution CSS pure qui permet d'obtenir l'effet souhaité :

table {
    border-spacing: 0;
    border-collapse: collapse;
    overflow: hidden;
    z-index: 1;
}

td, th, .row, .col {
    cursor: pointer;
    padding: 10px;
    position: relative;
}

td:hover::before,
.row:hover::before { 
    background-color: #ffa;
    content: '<pre class="brush:php;toolbar:false"><table>
    <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>
    <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>
</table>

a0'; height: 100%; left: -5000px; position: absolute; top: 0; width: 10000px; z-index: -1; } td:hover::after, .col:hover::after { background-color: #ffa; content: 'a0'; height: 10000px; left: 0; position: absolute; top: -5000px; width: 100%; z-index: -1; }

Explication

Ce CSS utilise une combinaison de pseudo-éléments, de positionnement absolu et d'indexation z pour créer l'effet souhaité.

• Les pseudo-éléments ::before et ::after créent des boîtes invisibles avant et après les éléments cibles ( lignes et colonnes).
• Le positionnement absolu permet à ces boîtes de s'étendre au-delà des limites de leurs éléments parents.
• Définition du z-index à -1 garantit que ces cases se trouvent en dessous des cellules réelles du tableau, les empêchant d'interférer avec les interactions de l'utilisateur.

HTML

Le balisage HTML correspondant est le suivant suit :

Dans ce balisage, les classes .row et .col sont ajoutées aux éléments d'en-tête du tableau pour les distinguer des lignes normales et colonnes, permettant un style différent si vous le souhaitez.

Cette solution offre une approche flexible pour mettre en évidence les lignes et les colonnes du tableau au survol, sans avoir besoin de JavaScript ou de bibliothèques externes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!