IE7: ¿Cómo hacer TD flotante?

Question

Quiero que un conjunto de <td> s flote a la izquierda en IE7. Deberían pasar a la siguiente línea si la ventana es demasiado pequeña.

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>

Esto funciona en IE8 y Firefox, pero no en IE7. ¿Qué estoy haciendo mal?

El modo de representación de página es " IE7 (Quirks) " o " IE7 (estándares) " ;. Sin embargo, estoy tratando con IE8, confiando en que el modo de representación de IE7 es lo que dice. " Vista de compatibilidad de IE8 " también está fallando, solo & "; IE8 Estándares &"; lo hace bien.

Answer 1

No creo que esto sea posible de la manera que quieras.

Cuando aplica el flotador a elementos td [en FF / IE8 [se convierten en objetos de tabla anónimos según la especificación CSS 2.1. Esencialmente, ya no son celdas de tabla, y estos objetos anónimos tienen un tipo de visualización que es flotante.

IE7 no sigue esta parte de la especificación, de hecho, el tipo de visualización de las celdas no se puede modificar en absoluto, y los objetos con un tipo de visualización de celda de tabla no se pueden flotar.

Si realmente necesita usar una tabla (en lugar de una ul / li), ¿podría hacer algo como esto en su lugar?

<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

Mi mejor conjetura: IE7 y versiones posteriores tienen modelos de tabla más estrictos y no le permiten cambiar el flujo de los elementos de la tabla.