Feste Tabellenbreite table-layout: fest
|
Damit die Tabelle den Bildschirm (den verbleibenden leeren Bereich) ausfüllt, wird ihr Breitenattribut häufig wie folgt definiert: 100 % und die Zellen werden ebenfalls mithilfe von Prozentsätzen definiert. Dies führt jedoch zu einem Problem: Wenn der Text in der Zelle die Breitenbeschränkung überschreitet, wird er automatisch umbrochen und die Höhe automatisch erhöht, was zu einem uneinheitlichen und hässlichen Stil für die gesamte Tabelle führt. Die naheliegende Lösung besteht darin, den Textumbruch zu deaktivieren: white-space:nowrap; overflow:hidden; So einfach! Aber der Effekt ist trotzdem unerwartet: Der gesamte Text wird in einer Zeile angezeigt, die Breite wird automatisch erweitert und überschreitet sogar den übergeordneten Container. Overflow funktioniert überhaupt nicht! Was ist los? Liegt es an der Prozentzahl? Wenn Sie jedoch eine statische feste Breite verwenden, geht die Flexibilität der Tabelle verloren. So wurde ohne großen Aufwand die ultimative Lösung gefunden: Feste Tabellenbreite: Tabellenlayout: fest; Übrigens habe ich ein einfaches Effektdiagramm erstellt, bitte beziehen Sie sich darauf:  |
>>: Beispielcode, wie CSS mehrere Klassen abgleicht
Artikel empfehlen
Probleme bei der Konfiguration von https-Server und Reverse-Proxy mit Nginx unter Windows
Anforderungslogik Frontend --> Nginx über http...
Tutorial zur Installation von MYSQL5.7 aus dem OEL7.6-Quellcode
Laden Sie zunächst das Installationspaket von der...
CSS realisiert den Maskeneffekt, wenn die Maus über das Bild bewegt wird
1. Setzen Sie den HTML-Code der Maskenebene und d...
Detailliertes Installations- und Deinstallationstutorial für MySQL 8.0.12
1. Installationsschritte für MySQL-Version 8.0.12...
Best Practices zur Implementierung einfacher Jira-Projekte mit React+TS
Eine Reihe von Projekten für die Ausbildung reagi...
Entwickeln Sie eine Vue-Komponente, die Iframe kapselt
Inhaltsverzeichnis 1. Komponenteneinführung 2. In...
Detaillierte Erklärung des Cocoscreater-Prefabs
Inhaltsverzeichnis Fertighaus So erstellen Sie ei...
Auf den Alibaba Cloud Server Tomcat kann nicht zugegriffen werden
Inhaltsverzeichnis 1. Einleitung 2. Lösung 2.1 Ko...
Beispiele für die Verwendung von „Provide“ und „Inject“ in Vue2.0/3.0
Inhaltsverzeichnis 1. Was ist der Nutzen von Prov...
Praktische Fähigkeiten zur Entwicklung von WeChat-Applets: Datenübertragung und -speicherung
Indem ich die verschiedenen Probleme, auf die ich...
Grundlegendes zur CSS-Eigenschaft „transform-origin“
Vorwort Ich habe vor kurzem eine Feuerwerksanimat...
Detaillierte Erläuterung der Architektur und Funktionen von InnoDB (Zusammenfassung der Lesehinweise zur InnoDB-Speicher-Engine)
Hintergrund-Threads •Hauptthread Der Kern-Hinterg...
So verwenden Sie griechische Buchstaben in HTML-Seiten
Griechische Buchstaben sind eine sehr häufig verw...
Detaillierte Erläuterung der Installationsmethode von Mysql 5.7.18 und des Prozesses zum Starten des MySQL-Dienstes
MySQL ist eine sehr leistungsfähige relationale D...
Detaillierte Erklärung der wunderbaren Verwendung von SUID, SGID und SBIT in Linux
Vorwort Die Dateiberechtigungsverwaltung von Linu...