Changements de largeur de tableau pour l'affichage: aucun style

Question

J'ai 2 portlets contenant chacun une table. Sur le premier bouton, cliquez sur un portlet avec la table s'affiche et les autres restent cachés. Sur un autre bouton, le clic inverse se produit comme la bascule entière de portlet. Je l'ai fait en utilisant le style display:none et show-hide, mais maintenant je suis coincé avec un problème que la largeur de la colonne de table change pour l'affichage aucun. Je ne peux pas utiliser la visibilité car cela crée un vide. Comment puis-je résoudre ce problème?

 <div class="portlet light bordered"> 
      <div class="portlet-body"> 
       <table id='aa'></table> 
      </div> 
     </div> 
     <div class="portlet light bordered" style="display: none"> 
      <div class="portlet-body"> 
       <table id='bb'></table> 
      </div> 
     </div> 

Answer 1

Si vous définissez display: none alors il se cacheront l'élément et la ruine aussi la mise en forme.

Pour résoudre ce problème, vous devez configurer votre bouton pour ajouter ce qui suit au style display: initial, ou réglez-le à ce dont vous avez besoin pour obtenir le résultat souhaité, peut-être display: inherit ou display: inline.

Voir ici pour plus d'informations: https://www.w3schools.com/jsref/prop_style_display.asp

Un extrait rapide à partir du lien:

La propriété d'affichage permet également l'auteur pour afficher ou masquer un élément . C'est similaire à la propriété de visibilité. Toutefois, si vous définissez l'affichage : aucun, il masque l'élément entier, tandis que la visibilité: caché signifie que le contenu de l'élément sera invisible, mais l'élément reste dans sa position et sa taille d'origine.

Et quelques informations sur les valeurs mentionnées ci-dessus: je

bloc - élément est rendu comme un élément de niveau bloc

en ligne - élément est affiché comme un élément en ligne. Ceci est la valeur par défaut

initial - Définit cette propriété sur sa valeur par défaut.