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

600 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!