IE7: How to make TD float?

Question

I want the set to <td>float left in IE7. If the window is too small, they should go to the next line.

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>

This works in IE8 and Firefox, but not in IE7. What am I doing wrong?

The page rendering mode is "IE7 (Quirks)" or "IE7 (Standards)." I try with IE8, however, believing that IE7's rendering mode is what it says. "IE8 Compatibility View" also does not work, only "IE8 Standards" fix it.

Answer 1

I do not think this is possible the way you want.

float td [ FF/IE8 [ CSS 2.1. , , , .

IE7 , , , - .

( ul/li), - ?

<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

: IE7 .