Table Column Percentage Width Precision & Internet Explorer 7

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!


I'm developing an application that uses TABLE elements heavily in
pages opened in dialog windows. Users should be able to resize the
window and have specific columns resize accordingly, while others
remain a fixed width. To achieve this, I use a combination of
percentage and pixels widths.

In the below example, Internet Explorer 7 will not strictly adhere to
the percentage widths for all COL elements. When the width of the
table is 1000 pixels, for example, the 4th column is rendered as 110
pixels (according to the clientWidth property) instead of the expected
119 pixels (1000 * 11.86%).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
" ">
<html xmlns=" ">
        <title>Resize Test</title>
        <style type="text/css">

    margin: 0;

    border: none;
    border-collapse: collapse;
    table-layout: fixed;

                <col style="width:20px" />
                <col style="width:18%" />
                <col style="width:19.2%" />
                <col style="width:11.86%" />
                <col style="width:15.73%" />
                <col style="width:5.46%" />
                <col style="width:10.26%" />
                <col style="width:8.53%" />
                <col style="width:auto" />

It seems Internet Explorer 7 has the tendency to use only the integral
part of the percentage value when calculating widths (i.e. 11 from
11.86). I've tested this in Firefox, where I get the correct results.

I've considering rounding the percentage values, but I need greater
precision. I'd also like to avoid handling the resize event of the
window/table to set pixels-based widths calculated from the available

Can anyone suggest a fix for this problem?


Site Timeline