web-dev-qa-db-fra.com

Comment masquer les colonnes dans un tableau HTML?

J'ai créé une table en ASPX. Je souhaite masquer l'une des colonnes en fonction de l'exigence, mais il n'existe pas d'attribut tel que visible dans la construction du tableau HTML. Comment puis-je résoudre mon problème?

htmlasp.nethtml-table
83
user601367

Vous devez utiliser la feuille de style à cette fin.

<td style="display:none;">
152
Anuraj

Vous pouvez utiliser le sélecteur CSS _nth-child_ pour masquer une colonne entière:

_#myTable tr > *:nth-child(2) {
    display: none;
}
_

Cela fonctionne en supposant qu'une cellule de la colonne N (que ce soit un th ou td) est toujours le Nième élément enfant de sa ligne.

Voici une démo.

Si vous souhaitez que le numéro de colonne soit dynamique, vous pouvez le faire en utilisant querySelectorAll ou tout autre framework présentant des fonctionnalités similaires, comme jQuery ici:

_$('#myTable tr > *:nth-child(2)').hide();
_

Démo avec jQuery

(La solution jQuery fonctionne également sur les navigateurs existants qui ne prennent pas en charge _nth-child_ ).

83
Kos

vous pouvez aussi utiliser:

<td style="visibility:hidden;">
or
<td style="visibility:collapse;">

La différence entre ceux qui "cachés" cache la cellule mais conserve l'espace mais avec "effondrement" l'espace n'est pas tenu comme display: none. Ceci est important lorsque vous cachez une colonne ou une ligne entière.

26
Dov Miller

La réponse de Kos est presque exacte, mais peut avoir des effets secondaires dommageables. Ceci est plus correct:

#myTable tr td:nth-child(1), #myTable th:nth-child(1) {
    display: none;
}

CSS (feuilles de style en cascade) en cascade attribue à tous ses enfants. Cela signifie que *:nth-child(1) cachera le premier td de chaque trET cachera le premier élément de tous les td enfants. Si l'un de vos td possède des éléments tels que des boutons, des icônes, des entrées ou des sélections, le premier sera masqué (woops!).

Même si vous n'avez pas actuellement des choses qui seront cachées, imaginez votre frustration si vous devez en ajouter une. Ne punissez pas votre futur moi comme ça, ça va être difficile de déboguer!

Ma réponse ne fera que masquer la première td et th sur tous les tr dans #myTable tout en protégeant vos autres éléments.

23
Rick Smith

Les personnes bootstrap utilisent .hidden class sur <td>.

10
theapache64

Vous pouvez également masquer une colonne à l'aide de l'élément col https://developer.mozilla.org/en/docs/Web/HTML/Element/col

Pour masquer la deuxième colonne d'un tableau:

<table>
  <col />
  <col style="visibility:collapse"/>
  <tr><td>visible</td><td>hidden</td></tr>
  <tr><td>visible</td><td>hidden</td></tr>

Problèmes connus: cela ne fonctionnera pas dans Google Chrome. Veuillez voter pour le bogue à l'adresse https://bugs.chromium.org/p/chromium/issues/detail?id=174167

6
Colonel Panic
<style>
.hideFullColumn tr > .hidecol
{
    display:none;
}
</style>

utilisez .hideFullColumn dans table et .hidecol dans. Vous n'avez pas besoin d'ajouter class class dans td car cela posera un problème, car index ne sera peut-être pas à l'esprit de chaque td.

2
souvik sett

Vous pouvez également faire ce que vs vs suggère par programmation en attribuant le style à Javascript en effectuant une itération dans les colonnes et en définissant l'élément td à un index spécifique pour qu'il ait ce style.

1
tamarintech