ansaurus

Question

table-layout: fixed in Internet Explorer breaks large tables

Answer 1

+2 A:

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"&gt;

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
    <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>

Robert 2009-07-16 14:39:02

Never knew about the tfoot thing. Works when I place it after the thead element. th/td in tbody seems to have no influence.

roosteronacid 2009-07-17 08:19:33

I should mention also that you really should name your css classes better, what if you want to resize them? then you have to rename them too!

Robert 2009-07-17 10:12:06

This is sample-code. I wanted to make sure people understood what I was doing.

roosteronacid 2009-07-17 10:59:06

ansaurus

tags:

views:

answers:

table-layout: fixed in Internet Explorer breaks large tables

related questions