Chrome, Safari en ignorant la largeur maximale dans le tableau

J’ai du code HTML comme celui-ci:

       
001

Le problème est que Chrome et Safari ignorent "max-width:1000px" Mon ami a trouvé que nous pouvions l’empêcher en ajoutant "display:block" pour la table interne, 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?

La largeur maximale s’applique aux éléments de bloc .

n’est ni bloc ni en ligne . Assez ambigu? haha. Vous pouvez utiliser display:block; max-width:1000px display:block; max-width:1000px et oubliez la width:100% . Chrome et Safari suivent les règles!

Edit 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é beaucoup de choses au fil des ans (je ne sais pas, je ne fais plus de conception Web). Je recommande d’utiliser une solution plus récente.

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 citant une source qui n’est pas la spécification est complètement incorrecte.

La spécification (la spécification CSS 3 pour le dimensionnement insortingnsèque et exsortingnsèque CSS fait référence à la spécification CSS 2.1 sur cette règle) indique clairement:

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

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

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

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 assignez.

Remarque: si vous appliquez ce style directement dans Chrome , cela ne fonctionnera pas. Vous devez appliquer le style dans votre fichier CSS / HTML et actualiser la page.

Enveloppez la table interne avec div et définissez max-width à cette div enveloppante.

J’ai eu le même problème. J’ai utilisé un tableau pour centrer mon contenu sur la page, mais la width:100%; max-width:1200px safari a été ignorée width:100%; max-width:1200px width:100%; max-width:1200px comme style appliqué à la table. J’ai appris que si j’emballais la table dans un div et définissais les marges gauche et droite sur auto sur le div, elle se centrerait sur la page et obéirait aux atsortingbuts de largeur max et min dans safari et firefox sur le mac. Je n’ai pas encore vérifié l’explorateur ou le chrome sur Windows. Voici un exemple:

 

Puis j’ai nested la table à l’intérieur de la div …

 

Je viens de trouver cette réponse et il est intéressant de noter que selon MDN ( https://developer.mozilla.org/en-US/docs/Web/CSS/max-width ), leur tableau de compatibilité pour max-width dit:

 | Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) | -------------------------------------------------------------------------------------------------------- |applies to  [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 compatible avec CSS2.1; les nouvelles spécifications CSS peuvent définir ce comportement, de sorte que les développeurs Web ne doivent pas en dépendre un maintenant.”

Il y a cependant des choses intéressantes sur MDN telles que “fill-available” et “fit-content” – nous avons certaines choses à attendre lorsque la spécification se stabilise et qu’elle est explicite sur ce front …

J’ai pu résoudre mon problème avec une requête média:

j’ai remplacé

 max-width: 360px 

avec

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

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

Dans CSS 2.1, l’effet de ‘min-width’ et ‘max-width’ sur les tables , les tables en ligne, les cellules de tableau, les colonnes de tableau et les groupes de colonnes n’est pas défini .

Les références données précédemment dans cette discussion, lisent à tort «lignes de tableau» comme «table». Celui-ci, cependant, 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 souhaite et il est dangereux de s’y fier.