web-dev-qa-db-fra.com

Comment masquer une balise TD en utilisant JavaScript ou CSS en ligne?

Comment puis-je masquer un <td> tag utilisant JavaScript ou CSS en ligne?

javascripthtmlcssvisibility
15
Blankman

Qu'attendez-vous qu'il se passe à sa place? Le tableau ne peut pas refluer pour remplir l'espace à gauche - cela semble être une recette pour les réponses du navigateur buggy.

Pensez à cacher le contenu du td, pas le td lui-même.

17
edeverett
.hide{

visibility: hidden

}

<td class="hide"/>

Modifier - Juste pour vous

La différence entre l'affichage et la visibilité est la suivante.

"display": a de nombreuses propriétés ou valeurs, mais celles sur lesquelles vous vous concentrez sont "none" et "block". "none" est comme une valeur de masquage et "block" est comme show. Si vous utilisez la valeur "none", vous totalement masquerez la balise html à laquelle vous avez appliqué ce style css. Si vous utilisez "block", vous verrez la balise html et son contenu. très simple.

"visibilité": a de nombreuses valeurs, mais nous voulons en savoir plus sur les valeurs "cachées" et "visibles". "caché" fonctionnera de la même manière que la valeur "bloc" pour l'affichage, mais cela masquera la balise et son contenu, mais cela ne masquera pas l'espace physique de cette balise. Par exemple, si vous avez quelques lignes de texte, puis et image (image) puis un tableau avec trois colonnes et deux lignes avec des icônes et du texte. Maintenant, si vous appliquez la visibilité css avec la valeur cachée à l'image, l'image disparaîtra mais l'espace que l'image utilisait restera à sa place, en d'autres termes, vous vous retrouverez avec un grand espace (trou) entre le texte et la table. Maintenant, si vous utilisez la valeur "visible", votre balise cible et ses éléments seront à nouveau visibles.

36
TStamper

De la même manière que vous cacheriez n'importe quoi: visibility: hidden;

7
Welbog

Tout est possible (ou presque) avec css, il suffit d'utiliser:

display: none; //to hide

display: table-cell //to show
6
Andre Silva
<td style = "display:none" >
<p> Content display none </p>
</td>

ou

<td style="visibility:hidden"> Your content is hidden </td>

Notez que: 2 ces manières sont différentes. Vous devriez l'essayer pour vérifier le résultat.

6
Hueston Rido

Si vous avez plus que cela en javascript, envisagez une bibliothèque javascript, par exemple jquery qui enlève un peu de vitesse, mais vous donne un code plus lisible.

Le code de votre question via jquery :

$("td").hide();

Bien sûr, il existe d'autres bibliothèques javascript, comme le montre cette comparaison sur wikipedia .

4
miku

Vous pouvez simplement masquer le <td> étiqueter le contenu en incluant simplement un attribut de style: style = "display:none"

Par exemple

<td style = "display:none" >
<p> I'm invisible </p>
</td>
2
Kunal

Nous pouvons masquer le contenu dans un en utilisant le CSS en ligne suivant:

<div style="visibility:hidden"></div>

par exemple:

<td><div style="visibility:hidden">Your Content Goes Here:</div></td>
1
Sheikh Rahat Ali