On 2007-08-07, Harry <wrote:
Using IE7, I'm trying to display a table in a horizontal manner by
floating the rows.
This is an extraordinary idea, but it is actually defined what is
supposed to happen, although it might not be in the way you were
expecting.
The following html does not work, displaying the table vertically as if
the rows were not floated.
This same html does work correctly in firefox.
><table style="width: 100%">
<tr style="float: left">
<td>col1</td>
</tr>
<tr style="float: left">
<td>col2</td>
</tr>
</table>
Does someone has any idea why and how to correct it ?
When you set float: left on a tr, it stops being display: table-row and
become display: block (CSS 2.1 9.7).
That means this table has no table-rows from the CSS point of view. But
as far as the HTML parser is concerned, it is OK, and is therefore not
"repaired".
This means you end up in section 17.1.2 of CSS 2.1 ("Anonymous table
objects"). What that does is create an anonymous table row box and table
cell box around the two floats since they appear directly inside a table
without a cell or a row.
Having done that, each td is now orphaned, so each one now needs its own
whole new anonymous table and tr.
So you end up with this structure of CSS boxes:
table
anon table-row
anon table-cell
float
anon table
anon table-row
anon table-cell
col 1
float
anon table
anon table-row
anon table-cell
col 2
So the outer table only has one cell, with two floats in it, each
containing another table. The floats should go side-by-side in their
cell if there is enough room, which is hard to tell in your case because
all we know is "width: 100%".
So who knows where the problem is in IE7, perhaps it doesn't implement
17.1.2 properly at all. After all you don't often get there unless you
use the display: table-row etc. properties (which I don't think IE7
supports) or change the value of display on elements like <tableand
<trwhich is what you're doing implicitly by floating them.
How to correct it? It's difficult to know. But table rows go one
underneath the other _in all the browsers_, it's just that the HTML
you've written is generating a lot more CSS boxes than it might look
like it is. If you need side-by-side table rows, you need to put them in
separate tables, which is what conforming browsers effectively do for
you with this input.
So I think you're likely to avoid the problem if you don't set float on
table-rows (or table-cells). Put each of those rows in separate tables
explicitly and then float the tables.
