IE7: Como fazer TD bóia?

Question

Eu quero um conjunto de <td>s flutuar deixado no IE7. Eles devem quebrar para a próxima linha se a janela é muito pequena.

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>

Isso funciona no IE8 e Firefox, mas não no IE7. O que estou fazendo de errado?

Modo de renderização da página é "IE7 (Quirks)" ou "IE7 (Padrões)". Estou tentando com o IE8, porém, confiando que o modo de renderização IE7 é o que diz. "Exibição de Compatibilidade IE8" está falhando assim, apenas "IE8 Standards" recebe-lo direito.

Answer 1

Eu não acho que isso é possível da maneira que quiser.

Quando você aplica o flutuador a elementos td [em FF / IE8 [eles se tornam objetos de tabela anônimos como pelo CSS 2.1 spec. Essencialmente, eles são há células da tabela mais longos, e esses objetos anônimos têm um tipo de exibição que é flutuante.

IE7 não segue esta parte da especificação, de fato, o tipo de células de exibição não podem ser alterados em tudo, e objetos com um tipo de exibição de-célula da tabela não pode ser transferido.

Se você absolutamente necessário usar uma tabela (em vez de um ul / li) que você poderia fazer algo parecido com isso em vez disso?

<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

Meu melhor palpite:. IE7 e abaixo têm modelos de mesa mais rigorosas e não permitem que você altere o fluxo de elementos da tabela