table-layout：在Internet Explorer中固定打破大表

问题描述：

我似乎偶然发现了一个错误（至少我认为是这样）。

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

有任何解决方法吗？

答

我有点担心你的标记的语义，并想知道是否是什么导致你的问题（默认样式表没有重写）。为什么在表头有任何td标签？为什么在身体和脚的桌子有Th标签？根据[w3c reccomendation] [1]：

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用于标题，TD用于数据，

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>

table-layout：在Internet Explorer中固定打破大表

相关推荐