IE7: Comment faire flotter TD?

Question

Je souhaite qu'un ensemble de <td> s flotte à gauche dans IE7. Ils devraient 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 de page est "IE7 (Quirks)" ou "IE7 (Standards)". J'essaie avec IE8, cependant, en faisant confiance que le mode de rendu IE7 est ce qu'il dit. "IE8 Compatibility View" échoue également, seul "IE8 Standards" l'obtient correctement.

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 table anonymes selon la spécification CSS 2.1. Essentiellement, ils ne sont plus des cellules de tableau, et ces objets anonymes ont un type d'affichage qui peut être flotté.

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

Si vous avez absolument besoin d'utiliser une table (au lieu d'un ul/li), pourriez-vous faire quelque chose comme ça à 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 estimation: IE7 et ci-dessous ont des modèles de table plus strictes et ne vous permettent pas de changer le flux d'éléments de table.