Comment mettre en évidence des lignes et des colonnes dans des tableaux avec CSS ?

Les points forts CSS pour les colonnes, les groupes de colonnes et les lignes améliorent les tableaux interactifs

Les tableaux hauts sont généralement conçus pour afficher une organisation de données complexe, où la mise en évidence visuelle de sections spécifiques améliore la compréhension de l'utilisateur. Traditionnellement, la pseudo-classe :hover est appliquée à un seul élément, tel qu'une cellule de tableau. Cependant, il est possible d'étendre cette fonctionnalité pour regrouper des éléments (tels que des colonnes ou des lignes) à l'aide de CSS.

Utiliser ::before et ::after Pseudo-Elements

En tirant parti du :: avant et ::après les pseudo-éléments, la mise en évidence peut être appliquée au-delà de l'élément sélectionné. Ces éléments créent essentiellement des éléments virtuels qui peuvent être placés par rapport à leur parent.

Application des surbrillances aux lignes et aux colonnes

Pour appliquer la surbrillance aux lignes et aux colonnes, suivez les étapes suivantes :

• Créez un pseudo-élément ::before et ::after pour les lignes et les colonnes.
• Stylisez-les avec une couleur d'arrière-plan pour indiquer la mise en surbrillance.
• Utilisez le positionnement absolu et le débordement. pour garantir que la mise en évidence s'étend au-delà des limites des cellules.
• Facultativement, ajoutez des classes pour faire la distinction entre la mise en évidence des lignes et des colonnes à des fins de personnalisation.

Exemple de mise en œuvre

CSS :

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; }

HTML :

Cette approche fournit une solution flexible et personnalisable pour mettre en évidence les lignes et les colonnes dans les tableaux.

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!