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.

Answer 1

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.

Answer 2

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.

Answer 3

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:)