largeur de la table

Bien que le sujet est-à-dire la largeur de la table, mais en fait le plus fou est que td width cellulaire. Habituellement, les développeurs rencontrent souvent ce problème, donc je suis à la recherche d'algorithme d'apprentissage de l'information de la largeur de la table.

table-layout

table-layout définit un algorithme de disposition de table est auto ou fixe.

fixé

Table fixe layout algorithme mise en page de table. Largeur de la largeur de la table a décidé que la largeur des colonnes ont une largeur de la première rangée de la décision de la cellule.
Tout d' abord sur une démonstration .
Analyse, cette table est calculée 200px largeur, la largeur de la première colonne est calculée 100px, calcule la largeur de la seconde colonne 20px, calcule la largeur de la troisième et la quatrième colonnes de 33px. La troisième colonne et la quatrième colonne la largeur de la table est
réduit et une première colonne et une deuxième colonne et une largeur gauche et à droite de la largeur de la bordure de la cellule divisée par deux pour obtenir. Vous pourriez demander, pourquoi le « 1-3 » où td width est pas encore défini? Pourquoi est calculé la troisième colonne? R: Parce que la définition de la largeur de td ne se trouve pas dans la première rangée, e est situé sur la première ligne.

règle

1. Si l'élément de colonne (col), la largeur des éléments de colonne sont disposés dans la largeur de la colonne. demo

2. largeur de l'élément de colonne est automatique, ou d'une liste d'éléments ne sont pas fournis (par exemple, une première démonstration), la première ligne de la cellule la largeur est réglée sur la largeur de la colonne de.

3. Si vous ne remplissez pas les deux cas ci-dessus, le calcul est déterminé par le navigateur.

auto (valeur par défaut)

disposition de table automatique mise en page de table de l'algorithme. Largeur dépend de la forme et le contenu de la cellule qui contient (ou cellule peut être la largeur est définie).

règle

1. Calcul de la largeur de la cellule minimum

   1.1 计算每个单元格的最小内容宽度：内容可以流入多行，但不能超出单元格。
   1.2 如果单元格的width值大于最小可能宽度，则最小单元格宽度为单元格的width值。
   1.3 如果单元格的width值为auto，则最小单元格宽度为为最小内容宽度。
   

2. Calcul de la largeur maximale des cellules: le contenu d'affichage souhaité ne revient pas complètement (enveloppe affichée indépendamment) Largeur

3. Calculer la largeur de la colonne d'au moins: la valeur maximale de la largeur de la colonne de la cellule minimum toutes les cellules

4. Calcul de la largeur maximale de la colonne: la valeur maximale de la largeur de la cellule de la colonne maximale de toutes les cellules

5. Si la cellule sur plusieurs colonnes, la largeur minimale de la colonne doit être égale à la somme de la largeur de cellule minimale dans la colonne des cellules. la largeur maximale de la ligne doit être égale à la largeur maximale de la cellule de la cellule.

demo

autres

Cependant, lorsque la largeur de la table est automatique, même lorsque la table est mise en page fixe, il est algorithme de mise en page automatique. demo

référence

1. W3C CSS2.1 documents chinois

2. MDN

3. CSS Le Guide définitif

Cet article est reproduit dans: singe 2048➬ https://www.mk2048.com/blog/blog.php?id=hhb1h1jchbb