Floating table cells in IE7

Question

I am currently re-styling a site but unforunately I am unable to edit any of the markup, which leads me to the following problem...

I have a table, similar to this:

<table>
  <tr>
    <td>Some content</td>
    <td>Some content</td>
  </tr>
  <tr>
    <td>Some content</td>
    <td>Some content</td>
  </tr>
  <tr>
    <td>Some content</td>
    <td>Some content</td>
  </tr>
</table>

and I want to display all the table cells on one line. In good browsers, I'm using:

table tr {
    display: inline;
    float: left;
}

to achieve this. However, this doesn't work in IE7. Is there any other CSS I can use to achieve the same effect? I have to stress that I have no access to the markup whatsoever and none of the table rows or cells have any way of accessing them directly so there's no way I can position absolutely.

Whilst I'm aware it is technically illegal, it does work in good browsers.. — thesonglessbird, Nov 25 '10 at 17:32
..I will have to demand access to the code or else write some kind of Javascript function to rewrite the markup as suggest. Thanks for the help guys. — thesonglessbird, Nov 25 '10 at 17:33

score 0 · Answer 1 · answered Nov 25 '10 at 17:23

You can't do that, I believe.

A tr is a table row and I'd expect the unexpected when trying to float one.

Besides, any element floated is instantly a block level element, so display: inline is redundant.

(The only exception when using it to prevent double margin bug in IE6 - but only if you have a margin set).

You could restructure the HTML with JavaScript, but I would not recommend you do that:)

score 0 · Answer 2 · answered Nov 25 '10 at 17:26

0

I agree with @Pekka that this is illegal. The best course of action here would be to add small js to transform table into somethings else. If you have access to just css you can still do that for IEs by adding a behavior and for other browser if that work - just use your solution.

answered Nov 25 '10 at 17:26

Dmitriy

2,742
1
17
15

IE's propriety `behavior` property is a whole new can of worms. Note it is only supported in IE 5/6/7 IIRC. – alex Nov 25 '10 at 17:28

score 0 · Answer 3 · answered Nov 25 '10 at 17:28

You can attempt inline-block but styling table elements with things such as float is a sin. You can attempt hiding the entire table and insert some load of loading icon while you extract the table info and display it with semantic markup.

Best course of action in this case is to ask for access. Just say you can't do the work without access to the markup. If they won't let you, just don't do the work.

Floating table cells in IE7

3 Answers3

Linked