mise en page: corrigé dans Internet Explorer casse les grandes tables

Je semble avoir trébuché sur un bug (ou du moins je le pense). Le bogue se produit dans Internet Explorer 7 et Internet Explorer 8 en "mode compatible".mise en page: corrigé dans Internet Explorer casse les grandes tables

Voici un test pages qui reproduit le 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>

Voici une capture d'écran de ce qui se passe:

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

Est-il possible de résoudre ce problème ?

Source

2009-07-16 roosteronacid

Le lien d'image est mort rendant la question moins claire. –

Je suis un peu préoccupé par la sémantique de votre balisage, et je me demande si c'est ce qui cause votre problème (feuille de style par défaut pas surchargé). Pourquoi y a-t-il des tags td dans la tête de la table? et pourquoi y a-t-il des étiquettes dans le corps et le pied de la table? Selon le [reccomendation w3c] [1]:

TH est en-têtes, TD pour les données, mais pour les cellules agissant à la fois l'utilisation TD

Le pied doit également être avant que le corps (ce peut être la cause principale).

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

Source

2009-07-16 14:39:02 Robert

Je n'ai jamais entendu parler de la chose de tfoot. Fonctionne quand je le place après l'élément thead. th/td dans tbody semble n'avoir aucune influence. – roosteronacid

Je devrais aussi mentionner que vous devriez mieux nommer vos classes css, et si vous voulez les redimensionner? alors vous devez les renommer aussi! – Robert

Ceci est un exemple de code. Je voulais m'assurer que les gens comprenaient ce que je faisais. – roosteronacid

mise en page: corrigé dans Internet Explorer casse les grandes tables

Répondre

Questions connexes