ie7的浮动表行不起作用

Question

I am working on a table that I cannot edit, I cannot add any HTML, I cannot add any JS. Everything has been pre-generated and all I can do is add CSS to it.

So table has 2 rows, one is sidebar, second is center content. I wanted to make the sidebar 210px wide and float it left, the same I did to center content. All works fine in all browsers but IE7. When I inspect it with IE7 developer tools, I can see that the row and the TD under it are always 100% wide and there is no way to assign a width value to it.

Is there a work around to this problem?

Sample code.

<table>
<tr id="sidebar"><td>Some data</td></tr>
<tr id="main"><td>Some data 2</td></tr>
</table>

CSS:
#sidebar
{
display:block;
width:210px;
float:left;
}
#main
{
display:block;
width:730px;
float:left;
}

Please advise

Answer 1

i don't have ie7, but setting the rows display:table-cell; and putting a width on the table works in chrome in this example. http://jsfiddle.net/jalbertbowdenii/7Wuku/

Answer 2

I think a good way of doing it is without the second row... Of course if you can make your markup like this:

<table>
    <tr>
        <td id="sidebar">Sidebar content</td>
        <td class="main_cont">Main content</td>
    </tr>
</table>

In this markup you won't need to float the td s, simply state the width. A live example is here: http://jsfiddle.net/skip405/QySz2/1/

But if you can't change the markup - I'm afraid you'll never teach IE7 to float table rows))