La largeur de colonne calculée est différente de la largeur déclarée de CSS pour la colonne. Comment le navigateur décide-t-il de la largeur?

Question

Disons que j'ai une table html avec une largeur CSS de 750px. Il a 5 colonnes et chaque colonne a une largeur de 50px, déclarée en utilisant css (tous les td ont une largeur de 50px). Évidemment, la somme des largeurs des colonnes est 250px, ce qui est inférieur à 750px. Lorsque le navigateur restitue la table, chaque colonne a une largeur calculée différente. J'ai une colonne qui a 5 espaces seulement mais une largeur calculée de plus de 100px (beaucoup plus que 5  ).

Toutes les colonnes correspondent à leur texte inclus plus des espaces vides supplémentaires. Aucune largeur de colonne codée en dur ne figure dans le balisage. Juste un seul 50px dans le CSS pour le 'td'.

Comment le navigateur calcule-t-il la largeur rendue de chaque colonne?

Answer 1

Lorsque vous définissez la largeur des colonnes d'une table, il s'agit simplement d'une largeur minimale recommandée, que le navigateur tente d'honorer si possible. La largeur réelle des colonnes est calculée à partir de la taille de leur contenu, en divisant l'espace restant uniformément entre les colonnes. Si l'une des colonnes est plus étroite que la largeur spécifiée, le navigateur essaie de l'ajuster s'il y a de l'espace libre dans les autres colonnes, mais dans ce cas, les colonnes sont déjà au-dessus du minimum. L'algorithme réel pour calculer les tailles de cellules diffère d'un navigateur à l'autre, ce qui signifie que les colonnes finiront légèrement différentes selon le navigateur que vous utilisez.

Answer 2

Ceci est appelé le modèle de boîte. padding et les frontières sont ajoutées à la largeur des éléments. Donc, un élément DIV avec padding: 10px; width: 50px; border: 1px solid black; est en réalité 72 pixels de largeur. Je m'attends à ce que votre td ait une bordure ou un rembourrage?

Answer 3

Les navigateurs tentent d'ajuster les cellules à l'intérieur de la largeur de la table, en développant/réduisant les td selon les besoins. Donc, vous avez réglé la table à 750px, mais seulement 250px de largeur. Dans ce cas, le navigateur utilisera son schéma d'espacement traditionnel qui, basé sur le contenu de chaque cellule, tente d'espacer uniformément les cellules.

Vous pouvez en savoir plus sur comment cela fonctionne here.

Answer 4

Vous devez utiliser le style de mise en page. Il y a 3 valeurs possibles:

• auto. Le défaut. La largeur dépend du contenu.
• corrigé. Dépend des largeurs indiquées dans le CSS.
• hérite. Hérite de la valeur de son parent.

Dans votre cas, vous devez utiliser la disposition de table: fixe; sur votre élément de table.