表格佈局：在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中修復大表格

回答

相關問題