Maison > Article > interface Web > Pourquoi « min-width » et « max-width » ne fonctionnent-ils pas sur les cellules d'un tableau et comment puis-je contrôler leur taille ?

Pourquoi « min-width » et « max-width » ne fonctionnent-ils pas sur les cellules d'un tableau et comment puis-je contrôler leur taille ?

Mary-Kate Olsenoriginal: 2024-10-25 07:07:02459parcourir

Why does `min-width` and `max-width` not work on table cells and how do I control their size?

Attributs Min-width et Max-height pour les tableaux

Lorsque vous essayez de définir des largeurs minimales et maximales pour les éléments du tableau à l'aide de l'attribut 'min- width' et 'max-width', cela peut ne pas être simple. Cet article aborde un problème courant où ces propriétés semblent être ignorées, provoquant un comportement inattendu.

Problème :

Définition de « min-width » et « max-width » sur les éléments 'td' ou dans les éléments 'div' imbriqués dans les éléments 'td' entraîne un comportement conflictuel. Le contenu peut respecter les dimensions spécifiées, mais la taille globale du tableau reste inchangée, laissant des espaces excessifs.

Solution :

La spécification CSS indique que « min-width Les propriétés ' et 'max-width' ne sont pas définies pour les cellules du tableau (c'est-à-dire les éléments 'td'). Au lieu de cela, la propriété « width » doit être utilisée pour appliquer une largeur minimale.

Pour garantir que la largeur des cellules du tableau est appliquée, la propriété « table-layout » doit être définie sur « fixe ». Cela demande au navigateur de calculer la largeur des colonnes en fonction des valeurs de « largeur » spécifiées, éliminant ainsi le problème des espaces.

Exemple de code :

Le code modifié suivant résout le problème en utilisant la propriété 'width' et en définissant 'table-layout' sur 'fixed':

<code class="html"><html>
<head>
    <style type="text/css">
        td {
            border: 1px solid black;
        }

        html,body,.fullheight {
            height: 100%;
            width: 100%;
        }
        .minfield {
            width: 10px;
            border: 1px solid red;
            overflow: hidden;
        }
        table {
            table-layout: fixed;
        }
    </style>    
</head>

<body>
    <table class="fullheight">
        <tr>
            <td class="minfield">
                <div class="minfield">
                    <p>hallo</p>
                </div>
            </td>
            <td><p>welt</p></td>
        </tr>
    </table>
</body>
</html></code>

Notez que la définition de 'table-layout' sur 'fixed' peut également affecter les largeurs de colonnes qui ne sont pas explicitement définies . Pour éviter des conséquences inattendues, assurez-vous que la largeur de toutes les colonnes est spécifiée.

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!

css define for using Property this column table td issue

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：Puis-je forcer un site Web Bootstrap à afficher la version de bureau sur les appareils mobiles ?Article suivant：Puis-je forcer un site Web Bootstrap à afficher la version de bureau sur les appareils mobiles ?

Articles Liés

Voir plus