IE7: Come far galleggiare TD?

Question

Voglio che un set di <td> s galleggi a sinistra in IE7. Dovrebbero passare alla riga successiva se la finestra è troppo piccola.

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>

Funziona su IE8 e Firefox, ma non su IE7. Cosa sto sbagliando?

La modalità di rendering della pagina è " IE7 (Quirks) " oppure " IE7 (standard) " ;. Sto provando con IE8, tuttavia, fidandomi che la modalità di rendering IE7 è ciò che dice. " Visualizzazione compatibilità IE8 " sta fallendo, solo " IE8 Standards " fa bene.

Answer 1

Non credo sia possibile nel modo desiderato.

Quando si applica il float agli elementi td [in FF / IE8 [diventano oggetti di tabella anonimi secondo le specifiche CSS 2.1. In sostanza, non sono più celle di tabella e questi oggetti anonimi hanno un tipo di visualizzazione mobile.

IE7 non segue questa parte delle specifiche, infatti, il tipo di visualizzazione delle celle non può essere modificato affatto e gli oggetti con un tipo di visualizzazione di cella-tabella non possono essere flottati.

Se hai assolutamente bisogno di usare una tabella (invece di un ul / li) potresti fare qualcosa del genere invece?

<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

La mia ipotesi migliore: IE7 e versioni precedenti hanno modelli di tabella più rigorosi e non consentono di modificare il flusso degli elementi della tabella.