IE7: Comment faire de la TD float?

Je veux un ensemble de <td>s flotter à gauche dans IE7. Ils doivent briser sur 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. Ce que je fais mal?

Le rendu de la Page est en mode "IE7 (Caprices)" ou "IE7 (Normes)". Je suis en train d'essayer avec IE8, cependant, faire confiance que IE7 mode de rendu est ce qu'il dit. "IE8 Affichage de Compatibilité" est un échec, seulement "IE8 Normes" obtient droit.

OriginalL'auteur Tomalak | 2009-06-19

  1. 4

    Je ne pense pas que ce soit possible de la façon dont vous le souhaitez.

    Lorsque vous appliquez le flotteur à des éléments td [FF/IE8[ ils deviennent anonymes tableau d'objets comme par le CSS 2.1 spec. Essentiellement, ils n'en ont plus de cellules de tableau, et ces objets anonymes ont un type d'affichage est flottantes.

    IE7 ne suit pas cette partie de la spécification, en fait, le type d'affichage des cellules ne peut pas être modifié à tout, et les objets d'un type d'affichage de la table-cell ne peut pas être évoquée.

    Si vous avez absolument besoin d'utiliser un tableau (au lieu d'une ul/li) pourriez-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>
    J'ai anticipé ce résultat. Merci, c'est ce qui explique pourquoi toutes mes tentatives pour faire ce travail dans IE7 ont échoué. Je pense que je vais aller avec l'ul/li ou un span/div approche, alors.

    OriginalL'auteur Delameko

  2. 0

    Ma meilleure supposition: IE7 et ci-dessous plus des modèles de table et ne vous permettra pas de modifier le flux des éléments de la table.

    OriginalL'auteur Alan Plum