table-layout：Internet Explorerで修正された大きなテーブルが破損する

私はバグに遭遇したようです（少なくとも私はそう思います）。バグは、Internet Explorer 7とInternet Explorer 8で互換モードで発生します。ここでtable-layout：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

画像のリンクが不明確であるため、質問が明確ではありません。 –

私はあなたのマークアップのセマンティクスについて少し気になり、それがあなたの問題を引き起こしているのか疑問に思っています（デフォルトのスタイルシートはオーバーライドされません）。テーブルヘッドに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

フットボールのことを知りませんでした。 thead要素の後に置くと動作します。 th/tdは影響を及ぼさないと思われる。 – roosteronacid

私はあなたが本当にあなたのCSSクラスの名前を付け加えるべきであることを言及すべきです、あなたがそれらのサイズを変更したいのであれば？あなたもそれらの名前を変更する必要があります！ – Robert

これはサンプルコードです。人々が私が何をしているのかを理解したかったのです。 – roosteronacid

table-layout：Internet Explorerで修正された大きなテーブルが破損する

答えて

関連する問題