![\"CSS-Tabellen-Layout](\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/175373449474530.jpeg\")
"}
TABLE-LAYOUT: Behoben erzwingt die Tabellenspaltenbreite, die durch die Zellbreite der ersten Zeile bestimmt wird, um den Inhalt zu vermeiden, der das Layout beeinflusst. 1. Set Table-Layout: Behoben und geben Sie die Tabellenbreite an; 2. Setzen Sie das spezifische Verh?ltnis der Spaltenbreite für die erste Zeile th/td; 3. Verwenden Sie den wei?en Raum: Nowrap, überlauf: versteckt und textüberfluss: Ellipsis zum Steuerung des Textüberlaufs; 4. Geeignet für Hintergrundmanagement, Datenberichte und andere Szenarien, die ein stabiles Layout und eine Hochleistungsrendern erfordern, die das Layout-Jitter effektiv verhindern und die Renderungseffizienz verbessern k?nnen.
Bei Verwendung von table-layout: fixed wird CSS die Spaltenbreiten-Berechnungsmethode von HTML-Tabellen ?ndert, wodurch das Tabellenlayout vorhersehbarer wird und besser funktioniert. Hier ist ein praktischer table-layout: fixed Beispiel und erkl?ren Sie seine Rolle und Nutzungsszenarien.
Was ist table-layout: fixed ?
Standardm??ig ist table-layout der Tabelle auto , und der Browser passt automatisch die Spaltenbreite entsprechend dem Inhalt ein. Nach der fixed wird die S?ulenbreite nur durch die Tabellenbreite und die Breite der ersten Zellreihe bestimmt . Der nachfolgende Zellinhalt wirkt sich nicht auf die Spaltenbreite aus, wodurch die Rendering -Leistung verbessert und Layout -Jitter vermieden wird.
Beispielcode
<! DocType html>
<html lang = "zh">
<kopf>
<meta charset = "utf-8" />
<title> Beispiel für Tabellenlayout </title>
<Styles>
.Fixed-table {
Breite: 100%;
Tischlayout: behoben; /* Schlüssel: Festliches Layout aktivieren*/
Grenzkollapse: Zusammenbruch;
Schriftfamilie: Arial, Sans-Serif;
}
.Fixed-table th,
.Fixed-table td {
Grenze: 1PX Solid #CCC;
Polsterung: 10px;
Text-Align: links;
überlauf: versteckt;
Text-Overflow: Ellipsis;
wei?er Raum: Nowrap; /* Textlinienverpackung verhindern*/
}
.Fixed-table th {
Hintergrundfarbe: #f0f0f0;
}
/* Manuell Setzen Sie die Spaltenbreite*/
.Fixed-table th: n-Kind (1),
.Fixed-table TD: N-te-Kind (1) {
Breite: 20%; / * Die erste Spalte macht 20% */aus
}
.Fixed-table th: n-Kind (2),
.Fixed-table TD: N-te-Kind (2) {
Breite: 30%; / * Die zweite Spalte macht 30% */aus
}
.Fixed-table th: n-Kind (3),
.Fixed-table TD: N-te-Kind (3) {
Breite: 50%; / * Die dritte Spalte macht 50% */aus
}
</style>
</head>
<body>
<table class = "fixed-table">
<kopf>
<tr>
<Th> Name </th>
<Th> Position </th>
<Th> Bemerkungen </th>
</tr>
</head>
<tbody>
<tr>
<td> Zhang san </td>
<td> Front-End-Entwicklungsingenieur </td>
<td> ausgezeichnet in React and Vue, der Code ist sehr gut geschrieben </td>
</tr>
<tr>
<td> li si </td>
<td> UI -Designer </td>
<td> Der Designentwurf ist perfekt in Details und oft überstunden, um die Zeichnungen </td> zu ?ndern
</tr>
<tr>
<td> wang wu </td>
<td> Datenanalyst </td>
<td> Millionen von Daten werden t?glich verarbeitet, und die Berichterstattung wird automatisiert </td>
</tr>
</tbody>
</table>
</body>
</html> Vorteile der Verwendung von table-layout: fixed
- Stabiles Layout : Die Spaltenbreite ?ndert sich nicht pl?tzlich, da eine Zeile zu lange Inhalte hat.
- Schnelleres Rendering : Der Browser kann die Spaltenbreite bestimmen, ohne alle Inhalte zu lesen.
- Geeignet für feste Strukturtabellen : wie Hintergrundmanagementsysteme, Datenberichte usw.
- Es ist besser, mit
text-overflow: ellipsis: Long Text die Ellipsis automatisch abzuschneiden.
Dinge zu beachten
- Die Tabelle muss
widtheingestellt werden, andernfalls kann dasfixedLayout abnormal funktionieren. - Die S?ulenbreite wird haupts?chlich von den Zellen in der ersten Reihe (normalerweise
theadoder der ersten Reihetr) bestimmt. Es wird daher empfohlen, die Breite aufthoder ersten Zeiletdeinzustellen. - Wenn die erste Zeile keine Breite hat, vertreibt der Browser die Spaltenbreite gleichm??ig.
- Wenn der Inhalt zu lang ist, denken Sie daran, das Display mit
white-space: nowrapundoverflow: hidden.
Gemeinsame Anwendungsszenarien
- Hintergrundverwaltungsformulare (z. B. Benutzerliste, Bestellentabelle)
- Datenanzeigeschnittstelle mit fester Spaltenbreite
- Tabellen, bei denen Ellipsis erforderlich sind, um einen langen Text abzuschneiden
- Gro?e leistungsempfindliche Tische (Hunderttausende Zeilen)
Grunds?tzlich ist das. table-layout: fixed scheint ein Trick zu sein, aber es ist in der tats?chlichen Entwicklung sehr praktisch, insbesondere wenn Sie nicht m?chten, dass "extra langer Inhalt einer bestimmten Zelle" das gesamte Tischlayout ruiniert.
Das obige ist der detaillierte Inhalt vonCSS-Tabellen-Layout feste Beispiel. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Hei?e KI -Werkzeuge
Undress AI Tool
Ausziehbilder kostenlos
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem v?llig kostenlosen KI-Gesichtstausch-Tool aus!
Hei?er Artikel
Hei?e Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Hei?e Themen
1597
29
1487
72
Aufbau unver?nderlicher Objekte in PHP mit Readonly -Eigenschaften
Jul 30, 2025 am 05:40 AM
ReadOmpropertiesinphp8.2canonlyBeSignedoncinstructororatDeklarationandCannotBemodifiedAfterward, durchsetzungsvermutbarkeitatheluagelevel.2.ToachedevimmiMmutability, WrapMutabletypesLikearrayObjecustomimmutablecollections
Ein Entwicklerleitfaden für Java Project Management zu Maven für Java
Jul 30, 2025 am 02:41 AM
Maven ist ein Standardwerkzeug für Java -Projektmanagement und -aufbau. Die Antwort liegt in der Tatsache, dass Pom.xml verwendet wird, um Projektstruktur, Abh?ngigkeitsmanagement, Konstruktionslebenszyklusautomation und Plug-in-Erweiterungen zu standardisieren. 1. Verwenden Sie POM.xml, um Gruppen, Artefaktid, Version und Abh?ngigkeiten zu definieren; 2. Master -Kernbefehle wie MVNClean, Compile, Test, Paket, Installation und Bereitstellen; Fn. V. 5.
Aufbau erholsamer APIs in Java mit Jakarta EE
Jul 30, 2025 am 03:05 AM
Setupamaven/GradleProjectWithjax-rsdependencies-?hnlich Jersey; 2. CreatearestresourcEUntationSuchas@pathand@Get; 3.ConfiguretheApplicationviaApplicationSubclitsorweb.xml;
Wie benutze ich Java Messagedigest für Hashing (MD5, SHA-256)?
Jul 30, 2025 am 02:58 AM
Um Hash -Werte mit Java zu generieren, kann es über die MessagedIGest -Klasse implementiert werden. 1. Holen Sie sich eine Instanz des angegebenen Algorithmus wie MD5 oder SHA-256; 2. Rufen Sie die Methode .update () auf, um die zu verschlüsselnden Daten zu übergeben. 3. Nennen Sie die Methode .Digest (), um ein Hash -Byte -Array zu erhalten. 4. Umwandeln Sie das Byte -Array in eine hexadezimale Zeichenfolge zum Lesen; Lesen Sie für Eingaben wie gro?e Dateien in Stücken und rufen Sie .update () mehrmals auf. Es wird empfohlen, SHA-256 anstelle von MD5 oder SHA-1 zu verwenden, um die Sicherheit zu gew?hrleisten.
Entwicklung einer Blockchain -Anwendung in Java
Jul 30, 2025 am 12:43 AM
Verstehen Sie die Kernkomponenten von Blockchain, einschlie?lich Bl?cken, Hashs, Kettenstrukturen, Konsensmechanismen und Unver?nderlichkeit; 2. Erstellen Sie eine Blockklasse, die Daten, Zeitstempel, frühere Hash und Nonce enth?lt, und implementieren Sie die SHA-256-Hash-Berechnung und den Nachweis des Arbeitsabbaus; 3.. Erstellen Sie eine Blockchain -Klasse, um Blocklisten zu verwalten, den Genesis -Block initialisieren, neue Bl?cke hinzufügen und die Integrit?t der Kette überprüfen. V. 5. Optionale Verbesserungsfunktionen umfassen Transaktionsunterstützung, P2P -Netzwerk, digitale Signatur, Restapi und Datenpersistenz; 6. Sie k?nnen Java-Blockchain-Bibliotheken wie Hyperledgerfabric, Web3J oder Corda zur Er?ffnung auf Produktionsebene verwenden
Python Property Decorator Beispiel
Jul 30, 2025 am 02:17 AM
@Property Decorator wird verwendet, um Methoden in Eigenschaften umzuwandeln, um die Les-, Einstellungs- und L?schsteuerung von Eigenschaften zu implementieren. 1. Grundnutzung: Definieren Sie nur schreibgeschützte Attribute über @Property, wie z. B. Bereich berechnet auf dem Radius und direkt zugegriffen; 2. Erweiterte Verwendung: Verwenden Sie @name.setter und @name.deleter, um die überprüfung der Attributzuweisung und L?schvorg?nge zu implementieren; 3. Praktische Anwendung: Führen Sie die Datenüberprüfung in Setzen durch, z. B. BankAccount, um sicherzustellen, dass der Restbetrag nicht negativ ist. 4. Benennungsspezifikation: Die internen Variablen sind vorangestellt, Eigenschaftennamen sind mit den Attributen überein, und eine einheitliche Zugriffskontrolle wird zur Verbesserung der Codesicherheit und -wartbarkeit verwendet.
CSS -Beispiel für Dunkelmodus umschalten
Jul 30, 2025 am 05:28 AM
Verwenden Sie zun?chst JavaScript, um die Einstellungen für Benutzersysteme und lokal gespeicherte Themeneinstellungen zu erhalten und das Seitenthema zu initialisieren. 1. Die HTML -Struktur enth?lt eine Schaltfl?che zum Ausl?sen von Themenwechsel. 2. CSS verwendet: root, um helle Themenvariablen zu definieren, .Dark-Mode-Klasse definiert dunkle Themenvariablen und wendet diese Variablen über var () an. 3.. JavaScript erkennt bevorzuge-farbige Scheme und liest LocalStorage, um das ursprüngliche Thema zu bestimmen. 4. Schalten Sie die Dark-Mode-Klasse im HTML-Element beim Klicken auf die Schaltfl?che und speichern Sie den aktuellen Status vor LocalStorage. 5. Alle Farb?nderungen werden mit einer übergangsanimation von 0,3 Sekunden begleitet, um den Benutzer zu verbessern
CSS -Dropdown -Menü Beispiel
Jul 30, 2025 am 05:36 AM
Ja, ein gemeinsames CSS-Dropdown-Menü kann mit reinem HTML und CSS ohne JavaScript implementiert werden. 1. Verwenden Sie verschachtelte UL und Li, um eine Menüstruktur zu erstellen. 2. Verwenden Sie die: Hover Pseudo-Klasse, um die Anzeige und das Verstecken von Pulldown-Inhalten zu steuern. 3.. Setzen Sie Position: Relativ für Eltern -Li, und das Untermenü wird unter Verwendung von Position positioniert: absolut; 4. Das untergeordnete Standards ist angezeigt: Keine, die angezeigt wird: Block, wenn sie schwebend sind; 5. Multi-Level-Pulldown kann durch Verschachtelung, kombiniert mit dem übergang und Fade-In-Animationen erzielt und an mobile Terminals mit Medienabfragen angepasst werden. Die gesamte L?sung ist einfach und erfordert keine JavaScript -Unterstützung, was für gro?e geeignet ist
