Comment utiliser CSS pour masquer les tableaux

Dans le développement front-end, les tableaux sont un composant très couramment utilisé pour afficher des données. Cependant, parfois nous ne souhaitons pas afficher toutes les données, mais devons masquer une certaine colonne ou ligne. À ce stade, nous devons utiliser CSS pour masquer le tableau.

1. Masquer les colonnes du tableau

1. Utilisez l'attribut display

On peut utiliser l'attribut display en CSS pour masquer une colonne du tableau. Les étapes spécifiques sont les suivantes :

Tout d'abord, définissez un nom de classe spécial pour la colonne qui doit être masquée. Par exemple, nous nommons la colonne que nous voulons masquer « colonne cachée ».

Ensuite, en CSS, définissez

    .hidden-column { 
      display: none; 
    }

sur la colonne correspondant à ce nom de classe. De cette façon, cette colonne sera masquée.

Par exemple, voici un tableau simple :

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Email</th>
      <th>Phone</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tom</td>
      <td>23</td>
      <td>tom@example.com</td>
      <td>(123) 456-7890</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>27</td>
      <td>jane@example.com</td>
      <td>(987) 654-3210</td>
    </tr>
    <tr>
      <td>John</td>
      <td>35</td>
      <td>john@example.com</td>
      <td>(111) 222-3333</td>
    </tr>
  </tbody>
</table>

Si on veut masquer la colonne "Email" du tableau, on peut faire ceci :

td:nth-child(3),
th:nth-child(3) {
  display: none;
}

Le :nth-child() sélecteur de CSS est utilisé ici pour préciser quelle colonne doit être être caché.

2. Utilisez la propriété de visibilité

Une autre façon de masquer les colonnes consiste à utiliser la propriété de visibilité en CSS. La différence entre celui-ci et l'attribut d'affichage est que lorsque nous utilisons l'attribut de visibilité pour masquer une colonne du tableau, la colonne masquée occupe toujours sa position d'origine sur la page, mais est invisible. Lors de l'utilisation de l'attribut d'affichage, la colonne masquée sera supprimée. de la page. Supprimé de la mise en page.

Le code ici est également similaire à la première méthode. ：

.hidden-column {
  visibility: hidden;
}

2. Masquer les lignes du tableau

Pour masquer toute la ligne du tableau, nous pouvons utiliser une méthode similaire au masquage des colonnes.

1. Utilisez l'attribut display

De la même manière que pour masquer les colonnes, nous pouvons également utiliser l'attribut display en CSS pour masquer les lignes du tableau. Les étapes spécifiques sont les suivantes :

Tout d'abord, définissez un nom de classe spécial pour la ligne qui doit être masquée. Par exemple, nous nommons la deuxième ligne qui doit être masquée « ligne-cachée ».

Ensuite, en CSS, définissez la ligne correspondant à ce nom de classe :

.hidden-row {
  display: none;
}

2 Utilisez l'attribut de visibilité

De la même manière que pour masquer les colonnes, nous pouvons également utiliser l'attribut de visibilité en CSS pour masquer les lignes du tableau. De même, une ligne de tableau masquée grâce à cette méthode occupe toujours sa position d'origine sur la page, mais n'est plus visible.

Le code permettant d'utiliser l'attribut de visibilité pour masquer les lignes du tableau est le suivant :

.hidden-row {
  visibility: hidden;
}

3 Résumé

Ce qui précède explique comment utiliser CSS pour masquer les colonnes ou les lignes du tableau. Quelle que soit la méthode que vous utilisez, vous pouvez masquer des cellules ou des lignes de tableau via des éléments HTML ou des sélecteurs CSS spécifiques. Dans le processus de développement réel, la compréhension et l'utilisation de ces techniques permettent de mieux contrôler le style et la disposition des tableaux et d'améliorer l'efficacité du développement frontal.

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!