How to make width of a column fit to its contents in IE9 compatibility mode?

I have the following table in my HTML.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<style type="text/css">
    table, td, tr, th{
        border:1px;
    }

    .onepx{
        width:1px;
    }
</style>


<div style="max-width:700px;">
    <table>
        <tr><td colspan="2">this is a loooooooooooooooong text</td></tr>
        <tr><td class="onepx">a:</td><td>b</td></tr>
        <tr><td class="onepx">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 and IE9 with compatibility mode turned off as shown below.

firefox

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

ie compatibility mode

For some reason, I cannot turn off compatibility mode in IE9. So is there a way to style the table as in compatibility mode?

Thanks in advance.

PS. I asked a similar question without emphasizing the IE9 compatibility mode. This question is raised after getting the information from the previous question. I am not sure if I should merge this question into the previous one as there is new requirement. Let me know if there is any advice.

Solution

So looking at what you've provided, if that's how it's set up in your file, you're working in strict mode and missing the opening and .

As far as changing IE9 mode, select F12 and you can change the browser and document mode.

Also, don't forget to add <meta http-equiv="X-UA-Compatible" content="IE=9" > to your head.

The table style should be moved to CSS.

You could also try:

Table:

<table class="fixed">
    <col width="10px" />
    <tr>
        <td>text</td>
    </tr>
</table>

CSS:

table.fixed { table-layout: fixed; }
table.fixed td { overflow: hidden; }