73 votes

Chrome, Safari ignorant la largeur maximale dans le tableau

J'ai un code HTML comme ceci:

 <!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> 
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> 
    <title></title> 
    </head> 

    <body> 
       <table style="width:100%;"> 
          <tr> 
             <td> 
                <table style="width:100%; max-width:1000px; background:#000099;"> 
                       <tr> 
                           <td> 
                               001 
                           </td> 
                       </tr> 
                   </table> 
               </td> 
           </tr> 
       </table> 
    </body> 
    </html> 
 

Le problème est que Chrome et Safari ignorent "max-width:1000px" Mon ami a découvert que nous pouvons le prévenir en ajoutant "display:block" à la table interne, et cela fonctionne d’une manière ou d’une autre.

Ce que je veux savoir, c'est: existe-t-il d'autres moyens de résoudre ce problème et pourquoi cela se produit-il?

87voto

Jason Points 1726

Max-width s'applique aux éléments de bloc . <table> n'est ni bloqué ni en ligne . Assez ambigu? haha. Vous pouvez utiliser display:block; max-width:1000px et oublier les width:100% . Chrome et Safari suivent les règles!

31voto

dustinwilson Points 161

Je sais que cela a été répondu pendant un certain temps et avec une solution de contournement, mais la réponse indiquant qu' max-width s'applique uniquement aux éléments de bloc et en citant une source qui n'est pas la spec est complètement incorrect.

La spec (le CSS 3 spec pour CSS Intrinsèque Et Extrinsèque de Dimensionnement se réfère à la CSS 2.1 spécification de cette règle) stipule clairement:

tous les éléments, mais non remplacer les éléments en ligne, les lignes de la table, et les groupes de lignes

ce qui voudrait dire qu'il devrait s'appliquer aux éléments de la table.

Cela signifie que WebKit est le comportement de ne pas honorer max-width ou min-width sur les éléments de la table est incorrect.

25voto

Serj Sagan Points 2731

Je pense que ce que vous recherchez ici est:

 table-layout: fixed
 

Appliquez ce style à la table et votre table respectera la largeur que vous lui attribuez.

Remarque: L'application de ce style directement dans Chrome donne l'impression que cela ne fonctionne pas. Vous devez appliquer le style dans votre fichier CSS / HTML et actualiser la page.

8voto

Jan Mazánek Points 49

Enveloppez la table intérieure avec div et réglez max-width sur cette div.

6voto

Cliff Points 39

J'ai eu le même problème. J'ai utilisé un tableau comme un moyen de centre de mon contenu sur la page, mais safari ignoré width:100%; max-width:1200px comme un style, j'ai appliqué à la table. J'ai appris que si j'enveloppe le tableau dans un div et de définir les marges gauche et droite sur l'auto sur le div, il serait le centre de la page et à obéir au max et min largeur attributs dans safari et firefox sur mac. Je n'ai pas encore vérifier explorer ou google chrome sur windows. Voici un exemple:

<div style="position:relative; width:100%; max-width:1200px; min-width:800px; margin-left:auto; margin-right:auto">

Ensuite, j'ai imbriqué de la table à l'intérieur de la div...

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X