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

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 Olsen

Libérer： 2024-10-25 07:07:02

original

469 Les gens l'ont consulté

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>

Copier après la connexion

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

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