IE7: Comment faire flotter TD?

Question

Je veux un ensemble de <td> éléments flottants dans IE7. Ils doivent passer à la ligne suivante si la fenêtre est trop petite.

CSS

table {
  width: 100%;
}
td {
  border: 1px solid red;
}
tr.f td {
  width: 500px;
  float: left;
}

HTML:

<table>
  <tr class="f">
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

Cela fonctionne dans IE8 et Firefox, mais pas dans IE7. Qu'est-ce que je fais mal?

Le mode de rendu des pages est & "; IE7 (Quirks) &"; ou " IE7 (normes) " ;. J'essaie avec IE8, cependant, de faire confiance au mode de rendu IE7. " Vue de compatibilité IE8 " échoue également, uniquement & "; Normes IE8 &"; fait bien les choses.

Answer 1

Je ne pense pas que ce soit possible comme vous le souhaitez.

Lorsque vous appliquez le flottant aux éléments td [dans FF / IE8 [ils deviennent des objets de table anonymes conformément à la spécification CSS 2.1. Pour l’essentiel, ce ne sont plus des cellules de tableau et ces objets anonymes ont un type d’affichage flottant.

IE7 ne suit pas cette partie de la spécification, en fait, le type d'affichage des cellules ne peut pas du tout être modifié, et les objets avec un type d'affichage de type table-cellule ne peuvent pas être flottants.

Si vous devez absolument utiliser un tableau (au lieu d'un ul / li), pouvez-vous faire quelque chose comme ceci à la place?

<style type="text/css" media="screen">`
    table {
        width: 100%;
    }
    .f {
        border: 1px solid red;
        float: left;
        height: 10px;
        width: 500px;
    }
</style>

<table summary="yes">
    <tr><td>
    <span class="f">1</span>
    <span class="f">2</span>
    <span class="f">3</span>
  </td></tr>
</table>

Answer 2

Ma meilleure hypothèse: IE7 et inférieur ont des modèles de tableau plus stricts et ne vous permettent pas de modifier le flux d'éléments de tableau.