Warum funktionieren „min-width' und „max-width' bei Tabellenzellen nicht und wie kontrolliere ich deren Größe?-CSS-Tutorial-php.cn

Warum funktionieren „min-width' und „max-width' bei Tabellenzellen nicht und wie kontrolliere ich deren Größe?

Mary-Kate Olsen

Freigeben： 2024-10-25 07:07:02

Original

603 Leute haben es durchsucht

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

Mindestbreiten- und Höchsthöhenattribute für Tabellen

Beim Versuch, minimale und maximale Breiten für Tabellenelemente mithilfe der „Mindestbreite“ zu definieren Wenn Sie die Eigenschaften „width“ und „max-width“ verwenden, ist dies möglicherweise nicht einfach. Dieser Artikel befasst sich mit einem häufigen Problem, bei dem diese Eigenschaften scheinbar ignoriert werden und unerwartetes Verhalten verursachen.

Problem:

Definition von „Mindestbreite“ und „Maximalbreite“ auf „td“-Elementen oder innerhalb von „div“-Elementen, die in „td“-Elementen verschachtelt sind, führt zu widersprüchlichem Verhalten. Der Inhalt kann den angegebenen Abmessungen entsprechen, aber die Gesamtgröße der Tabelle bleibt unverändert, sodass übermäßig viel Leerraum verbleibt.

Lösung:

Die CSS-Spezifikation gibt an, dass „min-width Die Eigenschaften ' und 'max-width' sind für Tabellenzellen (d. h. 'td'-Elemente) nicht definiert. Stattdessen sollte die Eigenschaft „width“ verwendet werden, um eine Mindestbreite zu erzwingen.

Um sicherzustellen, dass die Breite von Tabellenzellen erzwungen wird, sollte die Eigenschaft „table-layout“ auf „fixed“ gesetzt werden. Dadurch wird der Browser angewiesen, die Spaltenbreiten basierend auf den angegebenen „Breite“-Werten zu berechnen, wodurch das Leerzeichenproblem beseitigt wird.

Codebeispiel:

Der folgende geänderte Code behebt das Problem indem Sie die Eigenschaft „width“ verwenden und „table-layout“ auf „fixed“ setzen:

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

Nach dem Login kopieren

Beachten Sie, dass sich die Einstellung von „table-layout“ auf „fixed“ auch auf Spaltenbreiten auswirken kann, die nicht explizit definiert sind . Um unbeabsichtigte Folgen zu vermeiden, stellen Sie sicher, dass für alle Spalten die angegebene Breite angegeben ist.

Das obige ist der detaillierte Inhalt vonWarum funktionieren „min-width' und „max-width' bei Tabellenzellen nicht und wie kontrolliere ich deren Größe?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!