web-dev-qa-db-fra.com

Largeur CSS et largeur maximale combinées

J'ai le code suivant:

<table style="width: 100%; max-width: 800px; table-layout: fixed;">
    ... table stuff here ...
</table>

Je pense qu'il est évident que je souhaite que la table prenne toute la largeur disponible, avec une taille maximale limitée à 800 pixels.

Cela fonctionne dans Internet Explorer et Firefox, mais dans Chrome, il apparaît que le max-width est ignoré lorsque width est présent.

J'ai essayé d'utiliser max-width: 100%; width: 800px;, qui fonctionne à nouveau dans IE et FF, mais le max-width est ignoré dans Chrome. J'ai essayé d'utiliser uniquement max-width: 800px, mais sous Chrome, le tableau affiche une largeur de 1159 pixels ...!

Si quelqu'un peut aider à cela, ce serait très apprécié. 

csshtml-tablewidth
26
Niet the Dark Absol

Ajouter 

display: block;

à l'attribut style de l'élément de table (de préférence dans un fichier CSS ou dans la section <style> du document plutôt que dans le style en ligne).

Les éléments <div> ont display: block par défaut, alors que les éléments <table> ont display: table; par défaut. Votre problème est que la propriété max-width s'applique uniquement aux éléments de bloc, vous devez donc appliquer display: block; à la table.

37
heisenberg

Envelopper un div avec max-width et utiliser display: block ne fonctionne pas avec Chrome 66. Cependant, table-layout: fixed fait: https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout

Les largeurs de table et de colonne sont définies par la largeur des éléments table et col ou par la largeur de la première ligne de cellules. Les cellules des lignes suivantes n'affectent pas la largeur des colonnes . Avec la méthode de mise en page "fixe", le tableau entier peut être rendu une fois que la première ligne du tableau a été téléchargée et analysée. Cela peut accélérer le temps de rendu par rapport à la méthode de mise en forme "automatique", mais le contenu de la cellule suivante peut ne pas correspondre à la largeur de colonne fournie. Les cellules utilisent la propriété de débordement pour déterminer s'il convient de couper tout contenu en débordement, mais uniquement si la table a une largeur connue. sinon, ils ne déborderont pas les cellules.

4
manroe

Enveloppez la table dans un div de largeur maximale:

<div style="width: 100%; max-width: 600px;">
    <table style="width:100%;">
        <tr><td></td></tr>
     </table>
</div>
1
Sevin7

Vous pouvez utiliser:

min-width:100%; max-width:800px

Cela fonctionne pour moi dans IE9 et Chrome.

0
Jay