HTML table with table-layout fixed in div with overflow in IE6

I'm having a problem with IE6 in my layout. Here's the sample.

 <div style="overflow:hidden;">
    <table style="table-layout: fixed;" width="100%" border="0" cellpadding="4" cellspacing="0">
                    <colgroup>
                        <col width="30px" />
                        <col width="100px" />
                        <col width="200px" />
                        <col width="150px" />
                        <col width="300px" />
                        <col width="320px" />
                        <col />
                    </colgroup>
                    <tr>
                        <td>
                            &nbsp;
                        </td>
                        <td class="gridHeader">
                            Condition
                        </td>
                        <td>
                            Condition Description
                        </td>
                        <td>
                            Fixed Item
                        </td>
                        <td>
                            Optional Item
                        </td>
                        <td>
                        </td>
                    </tr>
                </table>
            </div>

In IE6, when I try to resize the browser width to be smaller (or when the number columns exceeds the browser width) and when the div hit the right most column, it stopped resizing and the browser scroll appears which shouldn'开发者_开发问答t happen. Does anyone know workaround for this? Any advice will be appreciated.

Regards, Nay Min

What is your desired behavior? Because you are fixing the width of columns using pixels, the browser's hands are tied. It can't reduce the size. If you prefer a fluid layout, use percentages. If you want to mimic max-width in IE6, you will need to rely on JavaScript.