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

Question

Hi, 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

Answer 1

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.