Une introduction détaillée aux règles de calcul de la largeur des cellules du tableau en HTML

À propos des règles de rendu de la tableaulargeur

La méthode de calcul de la largeur des cellules du tableau est principalement divisée en deux méthodes : Disposition de tableau fixe et disposition de tableau automatique, Les personnes qui écrivent souvent du CSS devraient toujours le savoir, mais nous constatons souvent que définir la largeur de la colonne du tableau ne fonctionne pas, ou qu'elle est rendue sans largeur fixe. Est-ce normal ? Présentons comment ces deux méthodes calculent le rendu.

Définissez d'abord plusieurs variables communes :

• tableLargeur=table width=100%

• tableBorderWidth=La largeur des bordures gauche et droite du tableau

• tdBorderWidth=La somme des largeurs des bordures gauche et droite de tous colonnes (les bordures combinées comptent pour 1px)

• tdPadding=Le remplissage gauche et droit de toutes les colonnes et

• tdWidth=La largeur de toutes colonnes avec une largeur définie et

• tdLength=nombre de colonnes

1. table-layout:fixed

ps : Dans une disposition de tableau fixe, la largeur des colonnes du tableau n'a rien à voir avec le contenu de la colonne. Elle est uniquement liée à la largeur du tableau, à la largeur des colonnes. , bordures gauche et droite du tableau, bordures gauche et droite des colonnes et remplissage gauche et droit des colonnes

En utilisant une disposition de tableau fixe, l'agent utilisateur peut afficher le tableau après avoir reçu la première ligne, c'est-à-dire uniquement la largeur de la première ligne fonctionnera

La largeur de la colonne avec width auto (c'est à dire là où la largeur n'est pas définie La largeur de la colonne, si le résultat du calcul est négatif, il est 0) = (tableWidth-tableBorderWidth-tdBorderWidth -tdPadding-tdWidth)/tdLength

1. Toutes les largeurs sont indéfinies

La largeur de chaque colonne uniformément répartie sur la largeur du tableau

th1	th2	th3	th4	th5	th6	th7	th8	th9	th10
row1row1row1row1row1row1row1row1	row2row2row2row2row2row2row2row2	row3	row4row4row4row4row4row4row4row4	row5row5row5row5row5row5row5row5	row6	row7row7row7row7row7row7row7row7	row8row8row8row8row8row8row8row8	row9row9row9row9row9row9row9row9	row10row10row10row10row10row10row10

2. . Tous ont une largeur définie et la somme de toutes les largeurs de colonnes est inférieure à la largeur du tableau (tableBorderWidth+tdBorderWidth+tdPadding+tdWidth <= tableWidth)

La largeur de chaque colonne est uniformément répartie dans le tableau. largeur totale ; la largeur du tableau est sa largeur définie

th1	th2	th3	th4	th5	th6	th7	th8	th9	th10
row1row1row1row1row1row1row1row1	row2row2row2row2row2row2row2row2	row3	row4row4row4row4row4row4row4row4	row5row5row5row5row5row5row5row5	row6	row7row7row7row7row7row7row7row7	row8row8row8row8row8row8row8row8	row9row9row9row9row9row9row9row9	row10row10row10row10row10row10row10

3. Tous ont une largeur définie et la somme de toutes les largeurs de colonnes est supérieure à la largeur du tableau (tableBorderWidth+tdBorderWidth+tdPadding+tdWidth > tableWidth)

La largeur de chacun la colonne est une largeur auto-définie ; la largeur du tableau est la somme des largeurs de toutes les colonnes (qui dépasseront la largeur définie par le tableau)

th1	th2	th3	th4	th5	th6	th7	th8	th9	th10
row1row1row1row1row1row1row1row1	row2row2row2row2row2row2row2row2	row3	row4row4row4row4row4row4row4row4	row5row5row5row5row5row5row5row5	row6	row7row7row7row7row7row7row7row7	row8row8row8row8row8row8row8row8	row9row9row9row9row9row9row9row9	row10row10row10row10row10row10row10

4. La largeur de la partie th est déterminée, et la largeur de th est déterminée en même temps. La largeur de la colonne est alors inférieure à la largeur du tableau (tableBorderWidth+tdBorderWidth+tdPadding+tdWidth <= tableWidth)

ps : Les colonnes avec fond gris foncé sont des colonnes avec des largeurs définies

Colonnes avec des largeurs définies La largeur est la largeur définie par elle-même La largeur des autres colonnes sans largeur définie est la largeur totale du tableau moins. la somme des largeurs définies puis réparties uniformément

th1	th2	th3	th4	th5	th6	th7	th8	th9	th10
row1row1row1row1row1row1row1row1	row2row2row2row2row2row2row2row2	row3	row4row4row4row4row4row4row4row4	row5row5row5row5row5row5row5row5	row6	row7row7row7row7row7row7row7row7	row8row8row8row8row8row8row8row8	row9row9row9row9row9row9row9row9	row10row10row10row10row10row10row10

5 La partie ème détermine la largeur, et en même temps la largeur de la colonne avec la largeur est. déterminé comme étant supérieur à la largeur du tableau (tableBorderWidth+tdBorderWidth+tdPadding+tdWidth > tableWidth)

ps : Les colonnes avec un fond gris foncé ont des largeurs définies

La largeur réelle d'une colonne avec une largeur définie est sa propre largeur définie. La largeur des autres colonnes sans largeur définie est la largeur totale du tableau moins la somme des largeurs définies, puis uniformément répartie. La largeur après la distribution moyenne est inférieure à zéro, alors <.>AutresLes colonnes sans largeur définie ont une largeur de 0

2. Disposition automatique du tableau, paramètre de tableau table-layout:auto (l'attribut la valeur par défaut est auto)

La largeur de chaque colonne est déterminée par la largeur de la cellule sans une ligne. La largeur du contenu est définie. Cet algorithme est parfois très lent car il doit visiter toutes les colonnes du tableau avant de déterminer la disposition finale

1. largeur minimale.

La largeur de chaque colonne est entièrement déterminée par le contenu à l'intérieur.

th1	th2	th3	th4	th5	th6	th7	th8	th9	th10
row1row1row1row1row1row1row1row1	row2row2row2row2row2row2row2row2	row3	row4row4row4row4row4row4row4row4	row5row5row5row5row5row5row5row5	row6	row7row7row7row7row7row7row7row7	row8row8row8row8row8row8row8row8	row9row9row9row9row9row9row9row9	row10row10row10row10row10row10row10

2. Tous définissent la largeur minimale, et la somme de toutes les colonnes calculée en fonction du contenu est inférieure à la largeur du tableau

La largeur de chaque colonne est d'abord basée sur Le contenu est calculé de manière à ce qu'il ne puisse pas être inférieur à la largeur minimale définie, et l'excédent de largeur est réparti uniformément au-dessus de chaque colonne.

th1	th2	th3	th4	th5	th6	th7	th8	th9	th10
row1	row2row2row2row2row2row2row2row2	row3	row4	row5	row6	row7	row8	row9	row10

3. Tous définissent la largeur minimale, et la somme de toutes les colonnes calculée en fonction du contenu est supérieure à la largeur du tableau

La largeur de chaque colonne est d'une part basée sur le calcul du Contenu, d'autre part, elle ne peut pas être inférieure à la largeur minimale définie

th1	th2	th3	th4	th5	th6	th7	th8	th9	th10
row1	row2row2row2row2row2row2row2row2	row3	row4row4row4row4row4row4row4row4	row5	row6row6row6row6row6row6row6row6	row7	row6row6row6row6row6row6row6row6	row9	row10row10row10row10row10row10row10

4. La partie définit la largeur minimale, et la somme de toutes les colonnes calculée en fonction du contenu est inférieure à la largeur du tableau

ps : Les colonnes avec fond gris foncé sont des colonnes avec une largeur minimale définie

La largeur de chaque colonne est d'abord calculée en fonction du contenu, deuxièmement, elle ne peut pas être inférieure à la largeur minimale définie, et enfin la largeur rendue par le tableau ne peut pas être inférieure à la largeur définie du tableau lui-même.

5. La partie th définit la largeur minimale, et la somme de toutes les colonnes calculée en fonction du contenu est inférieure à la largeur du tableau

ps : Les colonnes avec fond gris foncé définissent la largeur minimale de la colonne.

Chaque La largeur de colonne est d'abord calculée en fonction du contenu, et d'autre part elle ne peut pas être inférieure à la largeur minimale définie

th1	th2	th3	th4	th5	th6	th7	th8	th9	th10
row1	row2row2row2row2row2row2row2row2	row3	row4row4row4row4row4row4row4row4	row5	row6row6row6row6row6row6row6row6	row7	row6row6row6row6row6row6row6row6	row9	row10row10row10row10row10row10row10

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!