web-dev-qa-db-fra.com

CSS pour masquer plusieurs colonnes dans une table

J'ai un tableau similaire à celui illustré ci-dessous dans un site SharePoint. Je ne peux pas modifier le tableau car il est généré dynamiquement mais je peux ajouter du CSS externe pour remplacer son style. Je dois afficher uniquement la deuxième colonne et masquer les première, troisième et quatrième colonnes.

La pseudo-classe pour masquer la première colonne est

table#student tr td:first-child { display: none; }

Veuillez m'aider avec la pseudo-classe ou toute autre astuce pour masquer la troisième et la quatrième colonne.

<table id="student">
    <tr>
        <td>Role</td>
        <td>Merin</td>
        <td>Nakarmi</td>
        <td>30</td>
    <tr>
        <td>Role</td>
        <td>Tchelen</td>
        <td>Lilian</td>
        <td>22</td>
    </tr>
    <tr>
        <td>Role</td>
        <td>Suraj</td>
        <td>Shrestha</td>
        <td>31</td>
    </tr>
</table>
htmlcsshtml-tablehidepseudo-class
13
Merin Nakarmi

CSS3:

table#student td {
   display: none;
}
table#student td:nth-child(2) {
   display: block;
}

Utilisation nth-child sélecteur pour afficher le 2ème <td> de chaque ligne, affichant effectivement la 2e colonne.

19
AlienHoboken

Vous pouvez utiliser le sélecteur CSS3 : nth-child ()

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

jsfiddle ici

16
Aurélien Gasser

Je suis surpris que personne n'ait mentionné le sélecteur général de frères et sœurs. (Plus d'informations ici) Si vous avez seulement besoin d'afficher la deuxième colonne, j'appliquerais un style display: none; À la première cellule et à toutes les cellules après la deuxième.

table#student td:first-child,
table#student td:nth-child(2) ~ td {
  display: none;
}
<table id="student">
    <tr>
        <td>Role</td>
        <td>Merin</td>
        <td>Nakarmi</td>
        <td>30</td>
    <tr>
        <td>Role</td>
        <td>Tchelen</td>
        <td>Lilian</td>
        <td>22</td>
    </tr>
    <tr>
        <td>Role</td>
        <td>Suraj</td>
        <td>Shrestha</td>
        <td>31</td>
    </tr>
</table>

Si vous devez prendre en charge IE7 et IE8 pour une raison quelconque, vous pouvez remplacer le sélecteur :nth-child() par le sélecteur frère adjacent:

table#student td:first-child,
table#student td + td ~ td {
  display: none;
}
3
stealththeninja

Voici.

Le CSS: 

table#student tr td:first-child, table#student tr td:nth-child(3), table#student tr td:nth-child(4)  { display: none; }

DEMO DE TRAVAIL

0
Nitesh