CSS width et max-width combiné

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 j'ai l'intention de la table pour prendre toute la largeur disponible, avec un maximum plafonné taille de 800px.

Cela fonctionne dans Internet Explorer et Firefox, cependant dans google Chrome, il semble que la max-width est d'être ignoré lorsque width est présent.

J'ai essayé d'utiliser max-width: 100%; width: 800px;, à nouveau, qui fonctionne sous IE et FF, mais le max-width est ignoré dans Chrome. J'ai essayé en utilisant simplement max-width: 800px mais dans Chrome le tableau sort 1159 pixels de large au lieu de cela... !

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

Vous essayez de claquer deux tendances contradictoires des choses ensemble. width: 100% dit à occuper la pleine largeur horizontale du conteneur parent, puis en disant: "N'allez pas plus large que 800px". Il est entièrement à la CSS du moteur afin de déterminer LEQUEL de ces deux déclarations contradictoires a precendence.
B: Ils ne sont pas contradictoires. Si la largeur du navigateur (par exemple) est à moins de 800px, alors la largeur devrait augmenter à 100% de l'espace disponible. Si la fenêtre du navigateur est supérieure à 800px, alors il ne devrait progresser que de 800px de largeur (le maximum).
* max-width ne s'applique qu'aux éléments de bloc *

InformationsquelleAutor Niet the Dark Absol | 2011-10-29

40

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

<div> éléments ont display: block par défaut, alors que <table> éléments ont display: table; par défaut. Votre problème est que le max-width propriété s'applique uniquement aux éléments de bloc, de sorte que vous avez à appliquer display: block; à la table.
- Ne serait-ce pas d'incidence négative sur la table? Si oui, il serait peut-être préférable d'appliquer des styles à un contenant div?
- Non, ça n'a pas d'impact négatif sur la table. Div sont déjà bloc de style, votre problème, c'est que max-width ne s'applique qu'à des éléments de bloc, de sorte que vous avez à appliquer display:block à la table.
- L'affichage par défaut pour un type d'élément de tableau est "table" du CSS définit comme "un bloc-niveau de la table: c'est un bloc rectangulaire qui participe à un bloc de mise en forme de contexte". C'est à peu près le même que display: block en dehors de la voie des propriétés comme la "largeur" de se comporter (avec "max-width", etc). En display: table, min/max-width peut être ignoré et la largeur peut être sous réserve du contenu de la table. Avec display: block, réglage de la largeur ou de la max-width fonctionne quel que soit le contenu. Vous avez probablement habituellement voulez display:block à cause de cela. Et il arrive à travailler lorsqu'il est appliqué à une table.
- Ne fonctionne pas pour moi le contenu des cellules de la force de la table pour être plus grand que max-width
- Ici, il est correct pour la table elle-même (c'est à dire la frontière de la table a la bonne largeur), mais les cellules ne sont pas touchés (en gros, ils finissent à l'extérieur de la table)
- Il est intéressant de noter que l'établissement d'un tableau d'affichage:bloc peut avoir un effet négatif avec certains lecteurs d'écran. Modification de l'affichage de table peut provoquer le lecteur d'écran à l'interpréter comme un tableau de présentation, en signifiant que les données à l'intérieur de la table ne sera pas lue comme attendu sous forme d'un tableau.
- Cela provoque des cellules de tableau vides à l'effondrement.
- Cette solution entraîne des tables de moins de 100% de la largeur pour ne pas "s'étirer" à travers toute la largeur, ce qui je suppose est le but de l'utilisation width: 100% en premier lieu.
InformationsquelleAutor heisenberg
5

Emballage dans un div avec max-width et à l'aide de display: block ne fonctionne pas sur Chrome 66. Cependant, table-layout: fixed n': https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout

Table et des largeurs de colonnes sont définies par la largeur de la table et le col des éléments ou par la largeur de la première rangée de cellules. Les cellules dans les lignes suivantes n'affecte pas la largeur des colonnes.
Dans le cadre du "fixe" méthode de présentation, la totalité de la table peut être rendu une fois la première ligne de la table a été téléchargées et analysées. Cela peut accélérer les temps de rendu sur la "automatique" méthode de présentation, mais la suite du contenu d'une cellule peut ne pas tenir dans la largeur des colonnes fourni. Les cellules utilisent la propriété de dépassement de déterminer si de clip débordant de contenu, mais uniquement si la table a connu une largeur, sinon, ils ne déborde pas les cellules.

InformationsquelleAutor manroe

Envelopper le tableau dans un div qui a largeur max:

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

Cela n'a pas d'effet (au moins dans Mac Chrome).

InformationsquelleAutor Sevin7

0

Vous pouvez utiliser:
```
min-width:100%; max-width:800px
```
Il travaille pour moi dans les deux IE9 et Chrome.

InformationsquelleAutor Jay
-1

Utilisation min-largeur:800 ou vous le souhaitez et de définir le width:100%. Si la taille de votre navigateur, il sera fixé, mais la taille de votre page ne sera pas inférieure à la 800px

InformationsquelleAutor Vineet Sharma

Vous devez vous connecter pour publier un commentaire.