table-layout: correction d'un problème avec les largeurs de colonne

Nous sommes à l'aide de la CSS table-layout: fixed propriété de notre application mobile. (Je ne me souviens pas de la pleine raison, mais je crois qu'il avait à faire avec l'activation de mot d'habillage de quelques sortes)...

J'ai couru dans un problème où nous avons besoin de la taille de l'une des deux colonnes du tableau à deux colonnes. Pas une grosse affaire, habituellement nous faisons cela:

<table>
  <tbody>        
    <tr>
      <th width="20%">hello world</th>
      <td>hello world</td>
    </tr>
  </tbody>
</table>

Qui fonctionne très bien.

Cependant, si nous avons besoin de créer une ligne qui s'étend sur deux colonnes AVANT celui-ci:

<table>
  <tbody>   
    <tr>
      <td colspan="2">hello world</th>
    </tr>     
    <tr>
      <th width="20%">hello world</th>
      <td>hello world</td>
    </tr>
  </tbody>
</table>

Ce qui se passe, au moins en Chrome, c'est que les deux colonnes composant logiciel enfichable à 50% des largeurs. J'ai un jsbin exemple ici:

http://jsbin.com/ejovut/3

Est-ce un comportement normal? Un Chrome bug? Une façon de contourner ce problème?

InformationsquelleAutor DA. | 2012-04-13
  1. 12

    Ce n'est pas un bug. table-layout:fixed signifie que le navigateur est autorisé à optimiser la table-les calculs de mise en assumant seule la première ligne et de la colonne spécifications de la matière. En particulier, elle ne PAS besoin d'inspecter et de faire les calculs de mise sur la table de contenu, qui peut faire une grande différence dans la présentation de la performance.

    La bonne solution est d'utiliser le <col> et <colgroup> éléments de spécifier explicitement les largeurs de colonnes, plutôt que d'utiliser la première ligne.

    • Désolé de sembler dense, mais c'est la solution de pas utilisation de la table-layout:fixe? Ou utiliser le col et colgroup en plus de la table-layout:fixe, si ce fixe "retour automatique à la ligne"? (TBH je ne sais pas pourquoi, table-layout serait utilisée dans cet exemple et simplement la suppression il permettrait de résoudre le problème?
    • table-layout: fixed peut être nécessaire pour casser les mots longs (voir jsbin.com/utifiy/2/edit). En général, si vous avez besoin précis de contrôle de mise en page, la fixed valeur vous donne que le défaut n'a plus de magie: mais vous avez besoin pour remplacer la magie de dimensionnement avec quelque chose - c'est pourquoi vous devez soit explicitement la taille de la première ligne ou col élément spécifications. L'OP problème est que si la première ligne a des cellules qui s'étendent sur des colonnes, vous pouvez pas déclarer la taille des colonnes sur les cellules, de sorte que la solution est d'utiliser colà base de dimensionnement.
    InformationsquelleAutor Eamon Nerbonne
  2. -1

    première ligne de la table doit contenir tous les
    aussi, Chrome bugs n'autorise pas l'utilisation de ce.

    • contiennent tous de quoi?
    • <td width="xx%"></td>
    • Donc, c'est un Chrome bug et la solution de contournement consiste à assurez-vous que il ya un blanc la première ligne qui contient chaque TD?
    • oui, avec des "largeur", il n'est pas seulement pour google Chrome, mais aussi pour les FF et IE, bien que IE et FF permet de spécifier la largeur de chaque cellule avec <col> balises
    • "Chrome bugs ne permet pas d'utiliser pour cela" - qui bugs exactement?
    • code.google.com/p/chromium/issues/detail?id=20865

    InformationsquelleAutor 4esn0k