Comment spécifier en HTML ou CSS la largeur minimale absolue d'une cellule de tableau ?

Question

Résumé

Quel est le meilleur moyen de s'assurer qu'une cellule de tableau ne peut pas être inférieure à une certaine largeur minimale ?

Exemple

Je veux m'assurer que toutes les cellules d'un tableau ont une largeur d'au moins 100px par rapport à la largeur du conteneur du tableau. Si l'espace disponible est supérieur, les cellules du tableau doivent remplir cet espace.

Compatibilité des navigateurs

J'aimerais éventuellement trouver une solution qui fonctionne en

• IE 6-8
• FF 2-3
• Safari

Par ordre de préférence.

Answer 1

Ce CSS devrait suffire :

td { min-width: 100px; }

Cependant, il n'est pas toujours respecté correctement (l'attribut min-width) par tous les navigateurs (par exemple, IE6 l'apprécie très peu).

Editar: En ce qui concerne une solution pour IE6 (et avant), il n'y en a pas une qui fonctionne de manière fiable dans toutes les circonstances, pour autant que je sache. L'utilisation de l'attribut HTML nowrap ne permet pas vraiment d'obtenir le résultat souhaité, car il ne fait qu'empêcher les sauts de ligne dans la cellule, au lieu de spécifier une largeur minimale.

Cependant, si nowrap est utilisé en conjonction avec une propriété de largeur de cellule normale (comme l'utilisation de width : 100px), les 100px agiront comme suit como une largeur minimale et la cellule s'étendra toujours avec le texte (en raison du nowrap). Il s'agit d'une solution moins qu'idéale, qui ne peut pas être entièrement appliquée à l'aide de CSS et qui, en tant que telle, serait fastidieuse à mettre en œuvre si vous avez de nombreux tableaux auxquels vous souhaitez l'appliquer. (Bien sûr, toute cette solution alternative tombe à l'eau si vous voulez avoir des sauts de ligne dynamiques dans vos cellules, de toute façon).

Answer 2

Un autre pirater est le vieux truc du pixel transparent 1x1. Insérez une image gif transparente 1x1 et définissez sa largeur dans la balise image à la largeur souhaitée. Cela obligera la cellule à être au moins aussi large que l'image.

Answer 3

Je sais que c'est une vieille question, mais j'ai pensé que je pourrais partager quelque chose qui n'a pas été mentionné (bien que le concept soit assez simple). <div> à l'intérieur du tableau (dans l'un des <td> ou quelque chose comme ça) et définir le <div> a min-width . la table s'arrêtera à la <div> de la largeur. J'ai juste pensé que je devais le dire au cas où quelqu'un tomberait sur ça sur Google. De plus, je ne suis pas sûr de la façon dont la largeur minimale est gérée dans I.E6. mais cela a déjà été couvert dans une autre réponse.

Answer 4

J'ai eu un certain succès avec :

    min-width: 193px;
    width:auto !important; 
    _width: 193px;  /* IE6 hack */

Basé sur une combinaison de la réponse de Vatos et d'un article sur les hauteurs minimales ici : http://www.dustindiaz.com/min-height-fast-hack/

Answer 5

Qu'en est-il de cette propriété css

min-width: 100px

mais il ne fonctionne pas vraiment dans IE6 si je ne me trompe pas.

si vous ne voulez pas le faire de la manière css, je suppose que vous pouvez ajouter cet attribut

nowrap="nowrap"

dans la balise de données de votre table