Comment contrôlez-vous la largeur minimale de la cellule d'un tableau?

J'ai besoin dans une variété de cas afin de s'assurer d'une table, les cellules ne sont pas rétrécir passé une certaine largeur. Pour accomplir cela, j'ai essayé un certain nombre d'options, avec des résultats divers. Certaines des options que j'ai essayé:

  • largeur sur le td: fonctionne bien, mais certains navigateurs de l'ignorer et elle n'est pas valide en HTML5
  • CSS largeur à l'intérieur style="" ou de la feuille de style: ignoré par certains navigateurs
  • image avec une largeur de X et de hauteur=1: les causes du contenu de la td à pousser vers le haut ou vers le bas (en plus de 1px).
  • div avec une largeur de X et de hauteur=1 et float:left: cela semble fonctionner le mieux à l'instant, bien qu'il ne poussez le contenu vers le haut ou vers le bas légèrement

D'autres idées?

J'ai besoin de travailler dans quoi que ce soit, y compris IE6 🙁 mais si il y a des solutions qui ne fonctionnent pas dans IE6, mais tout le reste, ce serait un début de toute façon 🙂

aller avec des divs et oublier la table 🙂
J'adorerais. Comment pourrais-je les faire agir exactement comme un tableau, y compris colspan et rowspan?
..si c'est un tableau, c'est une table... je vois peu de raisons de passer à divs, de sorte que vous pouvez utiliser le CSS pour les transformer en tableaux.

OriginalL'auteur Darryl Hein | 2010-11-07

  1. 15

    Vous ne pouvez pas fiable de contrôle de la largeur d'une cellule de tableau. Il est préférable d'envelopper le contenu dans un DIV (ou de tout autres éléments de niveau bloc) et de la cible cet élément.

    Mais si il est de présenter des données tabulaires, il faut utiliser un tableau. À partir d'un point de vue sémantique non pas à l'aide d'un tableau de données tabulaires est aussi mauvais que l'utilisation d'un tableau pour les non-données tabulaires.
    Martinez je ne pense pas que @Brandon est le sens de remplacer la totalité de la table, mais au lieu d'envelopper le contenu à l'intérieur de la cellule dans une div, comme <tr><td><div>foo bar</div></td></tr>
    Ah, je n'ai pas, en effet, que ce serait mieux que l'utilisation d'un espaceur de l'image.
    C'est vrai... utilisez le tableau pour les données, il suffit d'envelopper les données à l'intérieur de chaque cellule dans un élément de type block.

    OriginalL'auteur Brandon Durham

  2. 3

    min-width commande correctement le minimum -- dans les navigateurs qui prennent en charge correctement. Souvent width la possibilité de travailler comme min-width dans IE6-ish non-sens. YMMV.

    OriginalL'auteur

  3. 0

    Regarder min-width. Pas compatible IE6, mais il va de roche dans la plupart des autres navigateurs.

    OriginalL'auteur Scott Baker