web-dev-qa-db-fra.com

Pourquoi TD la largeur ne fonctionne pas ou n'est pas suivie?

Question originale: HTML <table> a-t-il une largeur par défaut?

Récemment, quelqu'un a posé une question quelque part dans ce sens et m'a demandé de me poser des questions.

Prenez ceci par exemple.

http://jsfiddle.net/rqmNY/1/

Dans ce violon, si vous vérifiez sa largeur (j'utilise un élément inspect de Chrome), il affiche 100px, fonctionne comme prévu.

Ajoutons encore quelques "td" dans, et nous verrons que le "td:100px" css est ignoré.

http://jsfiddle.net/rqmNY/2/

Comme vous pouvez le constater, il s’agit maintenant de 83px au lieu de 100px comme prévu à l’origine.

Mais disons que je retourne à moins de TD (7) et que j'ajoute une largeur plus grande à chaque élément TD (500px), le résultat est que la largeur du td reste bloquée à 119px.

http://jsfiddle.net/rqmNY/6/

Et enfin, disons que j'ai un tableau de largeur 2000px, et td de 100px width et de nombreux éléments td. http://jsfiddle.net/rqmNY/7/

Maintenant, la largeur de la table remplace la largeur TD et étend la largeur du td à 222px.

Quelqu'un peut-il expliquer ce comportement?

p.s. Notez que dans tous les cas, inspecter l’outil élément me dit que la largeur correspond toujours au css, c’est juste le résultat final qui ne s’affiche pas correctement.

htmlcsshtml-tablecolumn-width
8
He Hui

Je crois fermement que la réponse à cette question est la suivante:

La priorité des largeurs qui affectera le TD est 

  1. Largeur de table

  2. Largeur d'élément parent (et s'il n'y en a aucune, fenêtre d'affichage)

  3. Largeur d'élément (TD).

Par conséquent, si la largeur de la table est définie, le TD sera TOUJOURS ajusté à la largeur de la table. Cependant, si la largeur n'est pas définie, la largeur "principale" sera la largeur de la fenêtre. Sauf indication contraire du code CSS, cela est vrai. Et ce n'est que lorsque la largeur totale du TD est inférieure à celle de la fenêtre de visualisation que la largeur de l'élément est prise en compte.

Modifier

  1. La largeur de la table remplacera toujours TD width.

  2. La largeur déclarée TD ne sera suivie que jusqu'à ce qu'elle dépasse la largeur de la fenêtre d'affichage, et la largeur de la fenêtre d'affichage sera prise en priorité.

15
He Hui

Avez-vous essayé d'ajouter display:inline-block à votre TD CSS? Cela force le navigateur à ne pas ignorer votre largeur TD.

20
Cynthia

En réalité, la largeur du tableau dépend de la largeur de la cellule lorsque vous ne spécifiez pas la largeur du tableau. Mais lorsque vous spécifiez la largeur de la table, la largeur de td sera ignorée. Regardez l'exemple suivant:

<table>
  <tr>
    <td>Column 1</td>
  </tr>
  <tr>
    <td>Column 2</td>
  </tr>
</table>

Si tu utilises 

td { 
  width:500px;
}

alors la largeur de la table sera 1000px.

Mais si vous utilisez

table {
  width:500px;
} 
td { 
  width:500px;
}

il ignorera la largeur <td> et la largeur de la table sera 500px.

1
Md Riad Hossain

Selon la documentation w3 Ici Il est indiqué "En l'absence de spécification de largeur, la largeur de la table est déterminée par l'agent utilisateur."

Ce que je peux en penser est td width dépend toujours de la largeur du tableau. Si vous le spécifiez ou non. Si vous avez une table de largeur 500px et 2 TD de largeur 200px chacune. Maintenant, après l’ajout de ces 2 TD dans la table, il reste 100px à adapter, de sorte que 50px est ajouté aux deux TD qui écrasent la propriété width initiale. Voir ce lien http://jsfiddle.net/rqmNY/7/

0
Raman