Maison  >  Article  >  interface Web  >  largeur du tableau

largeur du tableau

高洛峰
高洛峰original
2017-02-15 13:53:462250parcourir

Bien que la question porte sur la largeur du tableau, le plus frustrant est en fait la largeur de la cellule td. Je rencontre souvent ce problème dans mon développement quotidien, j'ai donc cherché des informations pour apprendre l'algorithme de largeur de tableau.

table-layout

table-layout définit l'algorithme de disposition du tableau, la valeur est automatique ou fixe.

fixe

Utilise un algorithme de disposition de table fixe pour la disposition des tables. La largeur du tableau est déterminée par la largeur et la largeur des colonnes est déterminée par la largeur de la première rangée de cellules.
Analyse, la largeur calculée du tableau ici est de 200 px, la largeur calculée de la première colonne est de 100 px, la largeur calculée de la deuxième colonne est de 20 px et la largeur calculée des troisième et quatrième colonnes est de 33 px. La largeur des troisième et quatrième colonnes est la largeur du tableau
moins la somme des largeurs des première et deuxième colonnes et la largeur des bordures gauche et droite de la cellule, puis divisée par 2. Peut-être vous demanderez-vous pourquoi le td où se trouve « 1-3 » ne définit-il pas la largeur ? Pourquoi la troisième colonne est-elle calculée ? Réponse : Étant donné que le td qui définit la largeur n'est pas situé sur la première ligne, th est situé sur la première ligne.

Règles

  1. Si un élément de colonne (col) est défini, la largeur de l'élément de colonne est définie sur la largeur de la colonne.

  2. La largeur de l'élément de colonne est automatique, ou si l'élément de colonne n'est pas défini, la largeur de la première ligne de cellules sera définie sur la largeur de la colonne.

  3. Si les deux conditions ci-dessus ne sont pas remplies, cela sera calculé et déterminé par le navigateur.

auto (valeur par défaut)

Utilisez l'algorithme de mise en page automatique du tableau pour disposer le tableau. La largeur des tableaux et des cellules dépend du contenu qu'ils contiennent (la largeur peut toujours être définie pour les cellules).

Règles

  1. Calculer la largeur minimale des cellules

    1.1 计算每个单元格的最小内容宽度:内容可以流入多行,但不能超出单元格。
    1.2 如果单元格的width值大于最小可能宽度,则最小单元格宽度为单元格的width值。
    1.3 如果单元格的width值为auto,则最小单元格宽度为为最小内容宽度。
  2. Calculer la largeur maximale des cellules : afficher entièrement le contenu et non la largeur requise lors du retour à la ligne (sans tenir compte de l'affichage du retour à la ligne)

  3. Calculer la largeur minimale de la colonne : la valeur maximale de la largeur minimale des cellules de toutes les cellules de la colonne

  4. Calculer la largeur maximale de la colonne : la valeur maximale de la largeur maximale des cellules de toutes les cellules de la colonne

  5. Si les cellules s'étendent sur des colonnes, la somme des largeurs minimales des colonnes doit être égale à cette valeur. Largeur de cellule minimale dans les cellules de la colonne. La largeur maximale de colonne doit être égale à la largeur maximale de cellule de cette cellule.

Pour plus d'articles sur la largeur des tableaux, veuillez faire attention au site Web PHP chinois !

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn