web-dev-qa-db-fra.com

Chrome, Safari ignorant la largeur maximale dans le tableau

J'ai du code HTML comme celui-ci:

<!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 l'empêcher en ajoutant "display:block" pour la table intérieure, et cela fonctionne d'une manière ou d'une autre.

Donc, 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?

htmlgoogle-chromesafariscaling
72
GaGar1n

La largeur maximale s'applique à éléments de bloc . <table> n'est ni bloc ni inline . Assez ambigu? haha. Vous pouvez utiliser display:block; max-width:1000px et oubliez width:100%. Chrome et Safari suivent les règles!

Modifier mai 2017: veuillez noter que ce commentaire a été fait il y a 7 ans (en 2010!). Je soupçonne que les navigateurs ont changé de groupe au fil des ans (je ne sais pas, je ne fais plus de conception de sites Web). Je recommande d'utiliser une solution plus récente.

86
Jason

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

Le spec (le CSS 3 spec pour CSS Intrinsic & Extrinsic Sizing fait référence à la spécification CSS 2.1 sur cette règle) indique clairement:

tous les éléments, mais les éléments en ligne, les lignes de tableau et les groupes de lignes non remplacés

ce qui signifierait qu'il devrait s'appliquer aux éléments du tableau.

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

31
dustinwilson

Je pense que ce que vous cherchez ici est:

table-layout: fixed

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

Remarque: L'application de ce style directement dans Chrome semblera ne pas fonctionner. Vous devez appliquer le style dans votre CSS / HTML fichier et actualisez la page.

25
Serj Sagan

Enveloppez la table intérieure avec div et définissez la largeur maximale sur cette div enveloppante.

8
Jan Mazánek

J'ai eu le même problème. J'ai utilisé un tableau pour centrer mon contenu sur la page, mais safari a ignoré width:100%; max-width:1200px comme style que j'ai appliqué au tableau. J'ai appris que si j'encapsulais le tableau dans un div et définissais les marges gauche et droite sur auto sur le div, il se centrerait sur la page et obéirait aux attributs de largeur max et min dans safari et firefox sur mac. Je n'ai pas encore vérifié Explorer ou 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é la table à l'intérieur de la div ...

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

Je viens de tomber sur cette réponse et il convient de noter que selon MDN ( https://developer.mozilla.org/en-US/docs/Web/CSS/max-width ), leur compatibilité table pour max-width dit:

|             Feature  | Chrome        | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
--------------------------------------------------------------------------------------------------------
|applies to <table> [1]| Not supported | (Yes)           | Not supported     | (Yes) | Not supported   |

"[1] CSS 2.1 laisse explicitement le comportement de max-width avec undefined. Par conséquent, tout comportement est conforme à CSS2.1; les spécifications CSS plus récentes peuvent définir ce comportement, donc les développeurs Web ne devraient pas s'appuyer sur un spécifique maintenant."

Il y a cependant des trucs sympas sur MDN tels que "fill-available" et "fit-content" - nous avons quelques choses à attendre lorsque la spécification se stabilise et est explicite sur ce front ...

1
jcuenod

J'ai pu résoudre mon problème avec la requête multimédia:

J'ai remplacé

max-width: 360px

avec

@media (min-width: 440px) {
    width: 360px;
}
0
user2908392

Voici une référence sans ambiguïté: 10 Détails du modèle de formatage visuel (w3.org)

En CSS 2.1, l'effet de "min-width" et "max-width" sur les tableaux , les tableaux en ligne, les cellules de tableau, les colonnes de tableau et la colonne groupes n'est pas défini .

Les références données précédemment dans ce fil, lisent par erreur "lignes de table" comme "table". Mais celui-ci dit vraiment "table". Cela fait partie de CSS2, mais CSS3 fait référence à CSS2 pour la base de max-width.

Il n'est donc pas défini et le navigateur est libre de faire ce qu'il veut et il n'est pas sûr de s'y fier.

0
Hibou57