I have the following table in my HTML:

```
<div style="max-width:700px;">
    <table border="1">
        <tr><td colSpan="2">this is a loooooooooooooooong text</td></tr>
        <tr><td width="1px">a:</td><td >b</td></tr>
        <tr><td width="1px">c:</td><td >d</td></tr>
    </table>
<div>

```

I want the first column width in the second and third row to just fit the content length (that is why I put `width="1px"` there). In the mean while, I want to table width to just fit the length of the longest content in the table (which is the first row) instead of spanning to the max-width of its bounding div.

It works in Firefox as shown below.

![Firefox display](https://i.stack.imgur.com/PMl2H.png)

However, in IE 9 it does not work as expected, as shown.

![IE 9 display](https://i.stack.imgur.com/VYBvV.png)

I tried to replace `width="1px"` with `width="1%"`. But then the table width will span to the max-width of the parent div.

Does anyone know how to fix it in IE?