Maison > Article > interface Web > Utilisation de l'attribut CSS table-layout

Utilisation de l'attribut CSS table-layout

不言original: 2018-06-25 16:42:142527parcourir

Aujourd'hui, je vais vous expliquer en détail comment utiliser l'attribut table-layout. L'attribut tableLayout est utilisé pour afficher les règles d'algorithme des cellules, des lignes et des colonnes du tableau. Cet article présente l'utilisation de l'attribut CSS table-layout à travers un exemple de code. Les amis qui en ont besoin peuvent s'y référer

Avant-propos :

Aujourd'hui. Parlons en détail de l'utilisation de l'attribut table-layout.

 /*eg:设置表格布局算法*/
 table{
     table-layout:fixed;
 }

***Mots clés dans cet article : valeur de l'attribut de mise en page de table, définition et utilisation, mise en page de table fixe, automatique disposition des tableaux.

1 Définition et utilisation

L'attribut tableLayout est utilisé pour afficher les règles d'algorithme pour les cellules, les lignes et les colonnes du tableau.

①Cet attribut spécifie l'algorithme de mise en page utilisé pour compléter la mise en page du tableau.

②L'algorithme de mise en page fixe est plus rapide, mais pas très flexible.

③L'algorithme de mise en page automatique est plus lent, mais reflète davantage les tableaux HTML traditionnels.

2 Disposition du tableau fixe

① Permet au navigateur de disposer le tableau plus rapidement par rapport à la disposition automatique du tableau

② Son niveau La mise en page uniquement ; dépend de la largeur du tableau, de la largeur des colonnes, de la largeur de la bordure du tableau, de l'espacement des cellules et n'a rien à voir avec le contenu de la cellule

③ En utilisant une disposition de tableau fixe, l'agent utilisateur peut afficher le tableau.

3 Déterminer automatiquement la disposition du tableau

①La largeur de la colonne est définie par le contenu le plus large de la cellule de la colonne sans ligne

②Ceci ; L'algorithme prend parfois beaucoup de temps car il doit accéder à tout le contenu du tableau avant de déterminer la disposition finale.

Valeur de l'attribut 4table-layout

①automatique : (valeur par défaut) la largeur de la colonne est définie par le contenu de la cellule

②fixe : la largeur de la colonne est définie par les paramètres de largeur de table et de largeur de colonne ;

③inherit : Spécifie que la valeur de l'attribut table-layout doit être héritée de l'élément parent.

Remarque : tous les navigateurs prennent en charge l'attribut table-layout.

Aucune version d'Internet Explorer (y compris IE8) ne prend en charge la valeur d'attribut « hériter » ! ! !

5 La théorie n'est pas aussi bonne que la pratique, et le code fonctionne

Peu importe ce que vous dites, il vaut mieux le comprendre plus vite en regardant le code ~ Jetons un coup d'œil à cette châtaigne ensemble↓↓↓

(Pour que tout le monde puisse voir le code, j'ai écrit le code CSS et HTML ensemble)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>table-layout属性测试</title>
        <style type="text/css">
            table.tb1 {
                table-layout: automatic;
            }
            table.tb2 {
                table-layout: fixed;
            }
        </style>
    </head>
    <body>
        <table class="tb1" border="1" width="100%">
            <tr>
                <td width="20%">aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
                <td width="40%">bbbbbbbbbbbbb</td>
                <td width="40%">ccc</td>
            </tr>
        </table>
        <br />
        <table class="tb2" border="1" width="100%">
            <tr>
                <td width="20%">aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
                <td width="40%">bbbbbbbbbbbbb</td>
                <td width="40%">ccc</td>
            </tr>
        </table>
    </body>
</html>

Après l'exécution, vous verrez comme indiqué dans l'image ci-dessous :

Ici, je veux vous expliquer que votre navigateur est peut-être assez large, ou peut-être qu'il n'y a pas assez de contenu dans votre cellule, donc vous ne pourrez peut-être pas le voir. L'effet des deux, lorsque vous devez réduire la largeur du navigateur ou augmenter le contenu de la cellule, vous verrez le différent. effets des deux valeurs d'attribut~~~

Ce qui précède est l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'apprentissage de tout le monde. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

CSS3 et jQuery implémentent l'effet Hover qui suit la direction de la souris

Utilisation de la rotation 3D CSS3 effet de rotation Introduction

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!

php jquery css css3 html 继承 table 算法

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

Article précédent：Effet d'invite dynamique CSS3 lorsque la souris se déplace dans l'imageArticle suivant：Effet d'invite dynamique CSS3 lorsque la souris se déplace dans l'image

Articles Liés

Voir plus