表格布局：在Internet Explorer中修复大表格

我似乎偶然发现了一个错误（或者至少我是这么认为的）。 Internet Explorer 7和Internet Explorer 8在“兼容模式”下发生此错误。表格布局：在Internet Explorer中修复大表格

下面是测试页抄录错误：

<%@ 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>

这里发生了什么的截图：

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

有什么办法来解决这个问题？

来源

2009-07-16 roosteronacid

图像链接已死，使问题不太清楚。 – 2016-09-30 21:35:25

我有点担心你的标记的语义，并想知道这是什么原因导致你的问题（默认样式表不覆盖）。为什么表头中有任何td标签？为什么在桌子的身体和脚上有标签？根据[W3C reccomendation] [1]：

TH为标题，TD数据，但对于同时充当使用TD

脚也应身前的细胞（此可能是主要原因）。

<%@ 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>

来源

2009-07-16 14:39:02 Robert

从来不知道tfoot的事情。当我将它放在thead元素后面时有效。 th/td in tbody似乎没有影响。 – roosteronacid 2009-07-17 08:19:33

表格布局：在Internet Explorer中修复大表格

回答

相关问题