Comment masquer les lignes d'un tableau sans redimensionner la largeur?

Question

Existe-t-il un moyen de masquer les lignes d'un tableau sans affecter la largeur globale du tableau? J'ai du javascript qui affiche / cache certaines lignes de la table, mais lorsque les lignes sont définies sur display: none; , la table est réduite pour correspondre au contenu des lignes visibles.

Answer 1

Si vous souhaitez conserver la largeur totale du tableau, vous pouvez le vérifier avant de masquer une ligne et définir explicitement la propriété de style width sur cette valeur:

table.style.width = table.clientWidth + "px";
table.rows[3].style.display = "none";

Toutefois, cela peut entraîner la redistribution des colonnes lorsque vous masquez la ligne. Un moyen possible de limiter ce problème consiste à ajouter un style à votre tableau:

 table {
  table-layout: fixed;
 }

Answer 2

Pour référence, la solution de levik fonctionne parfaitement. Dans mon cas, en utilisant jQuery, la solution ressemblait à ceci:

$('#tableId').width($('#tableId').width());

Answer 3

Règle CSS visibilité: collapse a été conçu exactement pour cela.

tbody.collapsed > tr {
    visibility: collapse;
}

Après avoir ajouté ce CSS, vous pouvez activer la visibilité de JS avec:

tbody.classList.toggle('collapsed');

Answer 4

En CSS, layout-table: fixed; sur votre table indique au navigateur de respecter les tailles que vous avez spécifiées pour les hauteurs et les largeurs. Cela supprime généralement le redimensionnement automatique par le navigateur, à moins que vous n'ayez indiqué la taille préférée de vos lignes et colonnes.

Answer 5

Vous pouvez le faire en utilisant du HTML pur

<table border="1">
<colgroup>
    <col width="150px" />
    <col width="10px"  />
    <col width="220px" />
</colgroup>
<tr>
    <td valign="top">1</td>
    <td> </td>
    <td>2</td>
</tr>
<tr>
    <td>3</td>
    <td> </td>
    <td>4</td>
</tr>
</table>