Comment masquer les colonnes dans un tableau HTML?

Question 1

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

Question 2

Vous devez utiliser la feuille de style à cet effet.

<td style="display:none;">

Question 3

Vous pouvez utiliser le nth-childsélecteur CSS pour masquer une colonne entière:

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

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

Voici une démo.

Si vous voulez que le numéro de colonne soit dynamique, vous pouvez le faire en utilisant querySelectorAllou tout autre framework présentant des fonctionnalités similaires, comme jQueryici:

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

Démo avec jQuery

(La solution jQuery fonctionne également sur les navigateurs hérités qui ne prennent pas en chargenth-child ).

Question 4

vous pouvez aussi utiliser:

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

La différence entre eux que «caché» cache la cellule mais il contient l'espace mais avec «réduire» l'espace n'est pas tenu comme affichage: aucun. Ceci est important lorsque vous masquez une colonne ou une ligne entière.

Question 5

La réponse de Kos est presque juste, mais peut avoir des effets secondaires néfastes. C'est plus correct:

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

CSS (Feuilles de style en cascade) va mettre en cascade des attributs à tous ses enfants. Cela signifie que *:nth-child(1)cela masquera le premier tdde chaque tr ET masquera le premier élément de tous les tdenfants. Si l'un de vos tdéléments comporte des boutons, des icônes, des entrées ou des sélections, le premier sera masqué (woops!).

Même si vous n'avez actuellement aucun élément qui sera caché, imaginez votre frustration plus tard si vous devez en ajouter un. Ne punissez pas votre futur moi comme ça, ça va être difficile à déboguer!

Ma réponse ne cachera que le premier tdet thle tout tren #myTablegardant vos autres éléments en sécurité.

Question 6

Les gens de Bootstrap utilisent la .hiddenclasse sur <td>.

Question 7

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 sur https://bugs.chromium.org/p/chromium/issues/detail?id=174167

Question 8

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

Développer l'extrait

utilisez .hideFullColumn dans la table et .hidecol dans th.

Question 9

Vous pouvez également faire ce que vs dev suggère par programme en attribuant le style avec Javascript en itérant dans les colonnes et en définissant l'élément td à un index spécifique pour avoir ce style.

Question 10

<!doctype html>
<html lang="en">
<head>
<style id="myStyleSheet">
...
</style>

var column = 3;
var styleSheet = document.getElementById("myStyleSheet").sheet;
var rule = "table  tr td:nth-child("+ column +"),table th:nth-child("+ column +") 
{display: none}";
styleSheet.insertRule(rule);

Answer 1

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

Answer 2

171

Vous devez utiliser la feuille de style à cet effet.

<td style="display:none;">

Anuraj
la source

1

que diriez-vous seulement du premier coloumn utilisant le css de html

bureau 302

comment y ajouter du style lorsque je crée une table en utilisant javascript createelement (td);

bureau 302

1

@ office302 Appliquer ce style uniquement au premier td? Ou vous voulez utiliser uniquement CSS - Cela vous pouvez faire quelque chose comme çatd:first-child { display:none; }

Anuraj

@Anuraj il convient de noter que: first-child etc. sont pris en charge> IE 11 et Edge, bon quand même

Vitaliy Terziev

Answer 3

1

que diriez-vous seulement du premier coloumn utilisant le css de html

bureau 302

Answer 4

comment y ajouter du style lorsque je crée une table en utilisant javascript createelement (td);

bureau 302

Answer 5

1

@ office302 Appliquer ce style uniquement au premier td? Ou vous voulez utiliser uniquement CSS - Cela vous pouvez faire quelque chose comme çatd:first-child { display:none; }

Anuraj

Answer 6

@Anuraj il convient de noter que: first-child etc. sont pris en charge> IE 11 et Edge, bon quand même

Vitaliy Terziev

Answer 7

88

Vous pouvez utiliser le nth-childsélecteur CSS pour masquer une colonne entière:

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

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

Voici une démo.

Si vous voulez que le numéro de colonne soit dynamique, vous pouvez le faire en utilisant querySelectorAllou tout autre framework présentant des fonctionnalités similaires, comme jQueryici:

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

Démo avec jQuery

(La solution jQuery fonctionne également sur les navigateurs hérités qui ne prennent pas en chargenth-child ).

Kos
la source

1

Cela peut avoir des effets secondaires néfastes, voir ma réponse ci-dessous pour une solution améliorée.

Rick Smith

@RickSmith Bon point. Mise à jour de mon message pour éviter le problème d'une autre manière (en utilisant le sélecteur d'enfant).

Kos

le sélecteur d'enfant est certainement meilleur. Bonne réponse.

Rick Smith

Belle solution mais nécessite un peu plus de réflexion sur le cas colspan.

Cinoss

Answer 8

1

Cela peut avoir des effets secondaires néfastes, voir ma réponse ci-dessous pour une solution améliorée.

Rick Smith

Answer 9

@RickSmith Bon point. Mise à jour de mon message pour éviter le problème d'une autre manière (en utilisant le sélecteur d'enfant).

Kos

Answer 10

le sélecteur d'enfant est certainement meilleur. Bonne réponse.

Rick Smith

Answer 11

Belle solution mais nécessite un peu plus de réflexion sur le cas colspan.

Cinoss

Answer 12

30

vous pouvez aussi utiliser:

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

La différence entre eux que «caché» cache la cellule mais il contient l'espace mais avec «réduire» l'espace n'est pas tenu comme affichage: aucun. Ceci est important lorsque vous masquez une colonne ou une ligne entière.

Dov Miller
la source

1

J'ai trouvé que pour les balises div, l'effondrement contiendra également l'espace. Pour les balises div, vous devrez utiliser display: none; afin de vraiment s'effondrer et ne pas tenir l'espace.

Dov Miller

5

visibility: collapseest conçu spécifiquement pour gérer l'affichage / le masquage des cellules, car il existe une différence lors du recalcul de la largeur / hauteur de la cellule entre ceci et display:none. Voir developer.mozilla.org/en-US/docs/Web/CSS/visibility#Values

SteveB

Answer 13

1

J'ai trouvé que pour les balises div, l'effondrement contiendra également l'espace. Pour les balises div, vous devrez utiliser display: none; afin de vraiment s'effondrer et ne pas tenir l'espace.

Dov Miller

Answer 14

5

visibility: collapseest conçu spécifiquement pour gérer l'affichage / le masquage des cellules, car il existe une différence lors du recalcul de la largeur / hauteur de la cellule entre ceci et display:none. Voir developer.mozilla.org/en-US/docs/Web/CSS/visibility#Values

SteveB

Answer 15

La réponse de Kos est presque juste, mais peut avoir des effets secondaires néfastes. C'est plus correct:

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

CSS (Feuilles de style en cascade) va mettre en cascade des attributs à tous ses enfants. Cela signifie que *:nth-child(1)cela masquera le premier tdde chaque tr ET masquera le premier élément de tous les tdenfants. Si l'un de vos tdéléments comporte des boutons, des icônes, des entrées ou des sélections, le premier sera masqué (woops!).

Même si vous n'avez actuellement aucun élément qui sera caché, imaginez votre frustration plus tard si vous devez en ajouter un. Ne punissez pas votre futur moi comme ça, ça va être difficile à déboguer!

Ma réponse ne cachera que le premier tdet thle tout tren #myTablegardant vos autres éléments en sécurité.

Answer 16

10

Les gens de Bootstrap utilisent la .hiddenclasse sur <td>.

theapache64
la source

Answer 17

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 sur https://bugs.chromium.org/p/chromium/issues/detail?id=174167

Answer 18

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

Développer l'extrait

utilisez .hideFullColumn dans la table et .hidecol dans th.

Answer 19

Vous pouvez également faire ce que vs dev suggère par programme en attribuant le style avec Javascript en itérant dans les colonnes et en définissant l'élément td à un index spécifique pour avoir ce style.

Answer 20

0

<!doctype html>
<html lang="en">
<head>
<style id="myStyleSheet">
...
</style>

var column = 3;
var styleSheet = document.getElementById("myStyleSheet").sheet;
var rule = "table  tr td:nth-child("+ column +"),table th:nth-child("+ column +") 
{display: none}";
styleSheet.insertRule(rule);

Albert
la source

2

J'espère que cela résoudra le problème, mais veuillez ajouter une explication de votre code afin que l'utilisateur comprenne parfaitement ce qu'il veut vraiment.

Jaimil Patel

Answer 21

2

J'espère que cela résoudra le problème, mais veuillez ajouter une explication de votre code afin que l'utilisateur comprenne parfaitement ce qu'il veut vraiment.

Jaimil Patel

Comment masquer les colonnes dans un tableau HTML?

Réponses: