Comment garder votre table de "fléchir" dans IE6/7

Question

J'ai quelques données tabulaires avec certaines fonctionnalités pour "voir les détails" qui déclenche un appel ajax pour ajouter quelques nouveaux éléments au DOM (généralement j'insère un autre TR juste après la ligne sélectionnée et innerHTML ou ajouter à l'intérieur d'un TD avec un colspan

Ma question est la suivante, dans IE6/7 mes colonnes flex. Actuellement, je n'ai pas une largeur "statique" par colonne et je voulais éviter cela si possible.

Toutes les suggestions pour éviter ce « flex »?

Answer 1

Cette astuce ici utilise le table-layout:fixed quelque peu ésotérique règle

utiliser comme ceci:

table {table-layout:fixed} 

Vous devez également spécifier la largeur des colonnes explicites pour les <td> s. La règle table-layout:fixed dit "Les largeurs de cellule de cette table dépendent de ce que je dis, pas du contenu réel dans les cellules". Ceci est utile normalement parce que le navigateur peut commencer à afficher la table après avoir reçu le premier <tr>. Sinon, le navigateur doit recevoir la table entière avant de pouvoir calculer les largeurs de colonnes. Cependant, il est également utile dans votre cas de conserver des largeurs de colonnes absolues.

Answer 2

Tables Redimensionner dynamiquement en fonction du contenu. Voilà leur nature. Vous pouvez toujours lire t Il "naturel" largeur de la colonne de la table quand il est rendu, puis appliquer un style pour verrouiller dans cette forme avant de vous faire appel Ajax.

Answer 3

Quand vous dites flex, voulez-vous dire redimensionner? Souvenez-vous que si vous modifiez quelque chose dans le DOM et que vous le repeignez, il se comportera de la même façon que lors du premier rendu de l'élément sur la page. Les meilleurs résultats que j'ai vus avec les tables sont d'effacer leur conteneur, de construire la table puis de l'ajouter au conteneur. Si vous parlez de colonnes qui se redimensionnent parce que vous n'avez pas déclaré de largeurs statiques via une classe, un style ou un attribut, les colonnes se redimensionnent en fonction de leur contenu.