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

Question

Résumé

Quelle est la meilleure façon de garantir 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 100 px par rapport à la largeur du conteneur des tableaux.S'il y a plus d'espace disponible, les cellules du tableau doivent remplir cet espace.

Compatibilité du navigateur

Il est possible que j'aimerais trouver une solution qui fonctionne dans

• IE 6-8
• FF2-3
• Safari

Dans l'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 ne l'aime pas beaucoup).

Modifier: Quant à une solution IE6 (et avant), à ma connaissance, aucune ne fonctionne de manière fiable dans toutes les circonstances.L'utilisation de l'attribut HTML nowrap n'obtient pas vraiment le résultat souhaité, car cela empêche simplement les sauts de ligne dans la cellule, plutôt que de spécifier une largeur minimale.

Cependant, si nowrap est utilisé conjointement avec une propriété de largeur de cellule standard (telle que l'utilisation de width :100px), le 100px agira comme une largeur minimale et la cellule s'agrandira toujours avec le texte (en raison du nowrap).Il s'agit d'une solution loin d'être idéale, qui ne peut pas être entièrement appliquée à l'aide de CSS et, en tant que telle, serait fastidieuse à mettre en œuvre si vous souhaitez l'appliquer à de nombreuses tables.(Bien sûr, toute cette solution alternative échoue si vous souhaitez de toute façon avoir des sauts de ligne dynamiques dans vos cellules).

Answer 2

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

Answer 3

Je sais que c'est une vieille question mais j'ai pensé partager quelque chose qui n'a pas été mentionné (bien que le concept soit assez simple ..), vous pouvez simplement mettre un <div> à l'intérieur de la table (dans l'un des <td>'s ou quelque chose du genre) et réglez le <div> à min-width.la table s'arrêtera au <div>la largeur.Je pensais juste que je le publierais au cas où quelqu'un trouverait cela 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é abordé 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 de hauteur minimale ici : http://www.dustindiaz.com/min-height-fast-hack/

Answer 5

qu'en est-il de cette propriété CSS

min-width: 100px

mais ça ne marche pas vraiment dans IE6 si je ne me trompe pas

si vous ne voulez pas le faire en CSS, je suppose que vous pouvez ajouter cet attribut

nowrap="nowrap"

dans la balise de données de votre table

Answer 6

Il s'agit d'une méthode multi-navigateurs pour définir la largeur minimale et/ou la hauteur minimale :

{
width (or height): auto !important;
width (or height): 200px;
min-width (or min-height): 200px;
}

IE 6 ne comprend pas !important
IE 6 voit largeur/hauteur : 200 px (écrasement automatique)

Les autres navigateurs comprennent le min- et le !important

Je ne suis pas familier à 100 % avec le comportement des largeurs dans les éléments TD, mais tout cela fonctionne bien, par exemple, sur les balises DIV.

D'AILLEURS:

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

Cela ne fonctionne pas à cause de l'ordre des 2 premières lignes, il faut qu'elles soient dans le bon ordre (pensez à ce qui précède) ;)

Answer 7

IE6 gère la largeur comme largeur minimale :

td {
    min-width: 100px;
    _width: 100px;/* IE6 hack */
}

Si vous souhaitez qu'IE6 gère la largeur comme les navigateurs normaux, attribuez-lui un overflow:visible;(pas le cas ici)