web-dev-qa-db-fra.com

Comment masquer une ligne de tableau HTML <tr> afin qu'elle ne prenne pas de place?

Comment masquer une ligne de tableau HTML <tr> afin qu'elle ne prenne pas d'espace? Plusieurs <tr> sont définis sur style="display:none;", mais ils affectent toujours la taille de la table et la bordure de la table reflète les lignes masquées.

htmlcsshtml-table
90
MikeN

J'aimerais vraiment voir le style de votre table. Par exemple. "effondrement de la frontière"

Juste une supposition, mais cela pourrait affecter le rendu des lignes "cachées".

34
o.k.w

Pouvez-vous inclure du code? J'ajoute style="display:none;" à mes lignes de table tout le temps et cela cache efficacement la ligne entière.

91
Calvin

Vous pouvez définir <tr id="result_tr" style="display: none;"> puis le restituer avec JavaScript:

var result_style = document.getElementById('result_tr').style;
result_style.display = 'table-row';
47
Jamshid Hashimi

Si display: none; ne fonctionne pas, pourquoi ne pas définir height: 0; à la place? En conjonction avec une marge négative (égale ou supérieure à la hauteur des bordures supérieure et inférieure, le cas échéant) pour supprimer davantage l'élément? Je n’imagine pas que position: absolute; top: 0; left: -4000px; fonctionnerait, mais cela vaut la peine d’essayer.

Pour ma part, utiliser display: none fonctionne bien.

7
David Thomas

J'avais le même problème, j'ai même ajouté style = "display: none" à chaque cellule.

Finalement, j'ai utilisé les commentaires HTML <!-- [HTML] -->

4
Simon Hughes

Ajoutez un peu de la hauteur de ligne suivante: 0px; taille de la police: 0px; hauteur: 0px; marge: 0; remplissage: 0;

J'oublie qui le fait. Je pense que c'est line-height pour IE6.

4
s_hewitt

J'ai pensé ajouter à cela une autre solution potentielle:

<tr style='visibility:collapse'><td>stuff</td></tr>

Je l’ai seulement testée sur Chrome, mais l’inscription sur <tr> masque la ligne PLUS, toutes les cellules de la ligne contribuent toujours à la largeur des colonnes. Je vais parfois créer une ligne supplémentaire au bas d'une table avec seulement quelques espaceurs qui permettent à certaines colonnes de ne pas dépasser une certaine largeur, puis masque la ligne à l'aide de cette méthode. (Je sais que vous êtes censé être capable de faire cela avec d'autres CSS mais je n'ai jamais réussi à faire ça.)

Encore une fois, je suis dans un environnement purement chrome et je ne sais donc pas comment cela fonctionne dans les autres navigateurs.

4
rgbflawed

Vous pouvez utiliser l'affichage de style: aucun avec tr à cacher et cela fonctionnera avec tous les navigateurs.

3
Shahid Siddique

Cela m'est arrivé et je me demandais pourquoi. Ensuite, j’ai remarqué que si j’en retirais une nbsp; J'avais dans les rangées, alors les rangées ne prenaient aucun espace.

2
Kevin H
var result_style = document.getElementById('result_tr').style;
result_style.display = '';

fonctionne parfaitement pour moi ..

1
Vignesh

Vous devez mettre la modification du type d'entrée sur masqué, toutes ses fonctions fonctionnent, mais elles ne sont pas visibles sur la page.

<input type="hidden" name="" id="" value="">

tant que le type d'entrée est défini sur celui-ci, vous pouvez modifier le reste . Bonne chance !!

0
user5431987