Html – table-layout: fixed in Internet Explorer breaks large tables

csshtmlhtml-table

I seem to have stumbled upon a bug (or at least I think so). The bug occurs in Internet Explorer 7 and Internet Explorer 8 in "compatible mode".

Here is a test-page which reproduces the bug:

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>

        <style type="text/css">

            table { width: 900px; table-layout: fixed; }

            .gray th, .gray td { background-color: #c2c2c2; }

            .width200 { width: 200px; }

            .width50 { width: 50px; }

        </style>
    </head>

    <body>
        <form runat="server">
            <table cellpadding="0" cellspacing="0">
                <thead>
                    <tr> <!-- When using "table-layout: fixed" the first row
                         serves as a guide to the width of the following
                         columns -->
                        <th class="width200"></th>
                        <th class="width200"></th>
                        <th class="width200"></th>
                        <td></td>
                        <td class="width50"></td>
                        <td class="width50"></td>
                    </tr>

                    <tr>
                        <th>---</th>
                        <th>---</th>
                        <th>---</th>
                        <td>///</td>
                        <td>///</td>
                        <td>///</td>
                    </tr>
                </thead>

                <tbody>
                    <% for (var i = 0; i <= 5000; i++) { %>
                    <tr class="gray">
                        <th>---</th>
                        <th>---</th>
                        <th>---</th>
                        <td>///</td>
                        <td>///</td>
                        <td>///</td>
                    </tr>
                    <% } %>
                </tbody>

                <tfoot>
                    <tr>
                        <th>---</th>
                        <th>---</th>
                        <th>---</th>
                        <td>///</td>
                        <td>///</td>
                        <td>///</td>
                    </tr>
                </tfoot>
            </table>
        </form>
    </body>
</html>

Here's a screenshot of what happens:

http://roosteronacid.com/ie_table-layout.jpg

Is there any way to fix this?

Best Solution

I'm a bit concerned about the semantics of your markup, and wonder if that is what is causing your problem (default stylesheet not overridden). Why is there any td tags in the table head? and why are there th tags in the body and foot of the table? According to the [w3c reccomendation][1]:

TH is for headers, TD for data, but for cells acting as both use TD

The foot should also be before the body (this may be the main cause).

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>

        <style type="text/css">

            table { width: 900px; table-layout: fixed; }

            .gray td { background-color: #c2c2c2; }

            .width200 { width: 200px; }

            .width50 { width: 50px; }

        </style>
    </head>

    <body>
        <form runat="server">
            <table cellpadding="0" cellspacing="0">
                <thead>
                    <tr> <!-- When using "table-layout: fixed" the first row
                         serves as a guide to the width of the following
                         columns -->
                        <th class="width200"></th>
                        <th class="width200"></th>
                        <th class="width200"></th>
                        <th></th>
                        <th class="width50"></th>
                        <th class="width50"></th>
                    </tr>

                    <tr>
                        <th>---</th>
                        <th>---</th>
                        <th>---</th>
                        <th>///</th>
                        <th>///</th>
                        <th>///</th>
                    </tr>
                </thead>

                <tfoot>
                    <tr>
                        <td>---</td>
                        <td>---</td>
                        <td>---</td>
                        <td>///</td>
                        <td>///</td>
                        <td>///</td>
                    </tr>
                </tfoot>

                <tbody>
                    <% for (var i = 0; i <= 5000; i++) { %>
                    <tr class="gray">
                        <td>---</td>
                        <td>---</td>
                        <td>---</td>
                        <td>///</td>
                        <td>///</td>
                        <td>///</td>
                    </tr>
                    <% } %>
                </tbody>
            </table>
        </form>
    </body>
</html>
Related Question