IE7: How to make TD float?

Question

I want a set of <td>s to float left in IE7. They should break onto the next line if the window is too small.

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?

Page rendering mode is "IE7 (Quirks)" or "IE7 (Standards)". I'm trying with IE8, though, trusting that IE7 rendering mode is what it says. "IE8 Compatibility View" is failing as well, only "IE8 Standards" gets it right.

Answer 1

I don't think this is possible the way you want.

When you apply the float to td elements [in FF/IE8[ they become anonymous table objects as per the CSS 2.1 spec. Essentially, they're no longer table cells, and these anonymous objects have a display type that is floatable.

IE7 doesn't follow this part of the spec, in fact, the display type of the cells cannot be altered at all, and objects with a display type of table-cell can't be floated.

If you absolutely need to use a table (instead of a ul/li) could you do something like this instead?

<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

My best guess: IE7 and below have stricter table models and don't allow you to change the flow of table elements.