Heim > Artikel > Web-Frontend > Warum funktionieren „min-width“ und „max-width“ bei Tabellenzellen nicht und wie kontrolliere ich deren Größe?
Warum funktionieren „min-width“ und „max-width“ bei Tabellenzellen nicht und wie kontrolliere ich deren Größe?
- Mary-Kate OlsenOriginal
- 2024-10-25 07:07:02459Durchsuche
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>
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!
In Verbindung stehende Artikel
Mehr sehen- Warum variieren die SVG-Bildproportionen in Internet Explorer 9?
- Wie drucke ich Kopf- und Fußzeilen von Webseiten auf jeder Seite?
- Warum werden meine SVGs im IE9 falsch skaliert, aber nur einige davon?
- Wie kann man mithilfe von Punkten in CSS eine einheitliche Textdarstellung über variable Längen hinweg erreichen?
- Wie ändert sich das Verhalten eines Inline-Elements, wenn es ein als Blockelement gestaltetes untergeordnetes Element enthält, und wie unterscheidet sich dies von einem Szenario, in dem das übergeordnete Element als Blockelement definiert ist?