Comment masquer les colonnes d'un tableau à l'aide de CSS

Avec le développement de la conception Web, les tableaux, en tant que l'une des premières méthodes de mise en page, nous sont familiers dans une certaine mesure et sont largement utilisés dans la conception Web. En tant que langage de balisage HTML doté de riches fonctions de composition, les tableaux sont fréquemment utilisés dans la conception Web et sont souvent utilisés pour afficher des informations et des graphiques de données complexes. Cependant, dans certains cas, nous ne souhaitons pas afficher toutes les informations du tableau, mais seulement une partie. Dans ce cas, CSS fournit un moyen très simple et efficace de masquer certaines colonnes du tableau. Aujourd'hui, nous allons apprendre à masquer les colonnes d'un tableau à l'aide de CSS.

1. L'attribut display dans la feuille de style CSS

Nous savons qu'il existe un attribut en CSS appelé display, qui peut définir l'état d'affichage d'un élément. Par exemple, pour le texte, l'attribut display peut être défini sur ". valeur "aucun". C'est caché. Ainsi, pour masquer les colonnes du tableau, nous pouvons utiliser l’attribut display pour masquer les colonnes du tableau.

2. Méthode d'implémentation de masquer la colonne

Ensuite, nous utilisons un simple tableau HTML pour démontrer. Dans le même temps, il suffit d'ajouter un style en CSS pour réaliser la fonction de masquage des colonnes.

Tout d’abord, nous définissons un tableau HTML simple et définissons des styles pour celui-ci.

nbsp;html>


    <meta>
    <title>Comment masquer les colonnes dun tableau à laide de CSS</title>
    <style>
        table{
            border: 1px solid black;
            border-collapse: collapse;
        }
        th, td{
            border: 1px solid black;
            padding: 5px;
        }
    </style>


    

                                                                                                                                                                                                                                                                                                                                                                                                                                

姓名	性别	年龄	居住地址
张三	男	25	北京市
李四	女	30	上海市
王五	男	28	广州市

Dans le paramètre de style, nous définissons un style de tableau de base, y compris la bordure extérieure du tableau, les espaces entre les cellules, etc. Par conséquent, notre tableau ressemble à ceci :

Supposons que nous voulions masquer la deuxième colonne du tableau "Gender", il nous suffit alors d'utiliser l'attribut display.

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

Utilisez l'instruction CSS ci-dessus pour obtenir l'effet de masquer le « sexe » dans la deuxième colonne du tableau. Autrement dit, grâce à l'attribut CSS selector: nth-child(n), on peut obtenir le td ou le ème élément correspondant à un nombre précis de colonnes du tableau, et grâce à la valeur display:none du style, les éléments de cette colonne peut être masquée.

Ici, nous expliquons la signification de l'instruction CSS :

table td:nth-child(2),  // 选中表格第二列td
table th:nth-child(2){  // 选中表格第二列th
    display: none;   // 隐藏所选择的td、th
}

Nous pouvons voir que l'utilisation de l'attribut display est très simple. Il vous suffit d'ajouter la ligne de code ci-dessus au style CSS d'origine pour obtenir la fonction de masquage de la table. colonnes. Voyons maintenant les effets spécifiques.

Comme vous pouvez le voir sur la photo, la deuxième colonne « Genre » a été masquée avec succès.

3. La différence entre masquer les colonnes et les colonnes tronquées

En CSS, nous avons également un attribut appelé tronqué, qui peut également être utilisé pour masquer les colonnes dans les tableaux. La différence avec hide est que hide cache simplement l'élément, tandis que tronqué étend l'élément à une largeur de 0 pixel pour obtenir l'effet d'être complètement caché et de ne pas prendre de place.

Le code de tronqué est le suivant :

table td:nth-child(2),
table th:nth-child(2){
    width: 0;
    padding: 0;
    border: none;
    white-space: nowrap;
}

Dans tronqué, nous définissons non seulement la largeur de l'élément à 0, mais également le remplissage et la bordure à 0. Utilisez également white-space:nowrap pour déplacer légèrement le contenu vers la gauche et éviter qu'il ne soit enveloppé. De cette façon, nous avons réussi à masquer la deuxième ligne du tableau, « Gender ».

4. Scénarios d'application des méthodes masquées et tronquées

Ensuite, résumons brièvement les scénarios d'application des méthodes masquées et tronquées.

Pour la méthode hide, elle est plus adaptée aux scènes qui doivent basculer entre l'affichage et le masquage, comme les sous-menus dans la barre de menus. De plus, hide convient également pour masquer certaines données anormales dans les tableaux afin de garantir la beauté et l'applicabilité de la page.

La méthode tronquée est plus adaptée aux scénarios où certaines données du tableau doivent être masquées tout en conservant la disposition et la hiérarchie du tableau. Par exemple, dans la liste des commentaires d'un blog, nous pouvons masquer les informations sensibles de l'utilisateur. étend toujours ses informations d'identité à 0 et n'occupe pas d'espace de mise en page.

En résumé, la différence entre la méthode hide et la méthode tronquée dépend des exigences de conception et de la nature de la table qui doit masquer les données. Lorsque nous l'utilisons, nous devons choisir en fonction de la situation réelle.

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!