CSS-Tabellen-Layout feste Beispiel
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)
Edge PDF -Viewer funktioniert nicht
Aug 07, 2025 pm 04:36 PM
TestthepdfinanotherapptodetermineeiftheisueiswithTheFileoredge.2.Enablethebuilt-InpdfviewerByTurningOff "immerOpenpdffileSexTternal" und "DownloadPdffffiles" Inedgesetings
Wie implementieren Sie einen einfachen TCP -Client in Java?
Aug 08, 2025 pm 03:56 PM
Importjava.ioandjava.net.socketfori/oandsocketcommunication.2.CreateSocketObjectToConnectTotheserverusednameAnDport.3.useprintSertosendDataviaoutputStreamandBufferedReadereadServerresponSfrend
Bereitstellung einer Java -Anwendung in Kubernetes mit Docker
Aug 08, 2025 pm 02:45 PM
Containerisierte Java-Anwendung: Erstellen Sie eine Dockerfile, verwenden Sie ein grundlegendes Bild wie Eclipse-Temurin: 17-Jre-Alpine, kopieren Sie die JAR-Datei und definieren Sie den Startbefehl, erstellen Sie das Bild über Dockerbuild und führen Sie lokal mit Dockerun aus. 2. Drücken Sie das Bild in die Containerregistrierung: Verwenden Sie Dockertag, um das Bild zu markieren und zu Dockerhub und anderen Registern zu drücken. Sie müssen sich zuerst bei DockerLogin anmelden. 3.. Bereitstellen in Kubernetes: Schreiben Sie die Bereitstellung. Yaml, um die Bereitstellung zu definieren, die Anzahl der Replikate, Containerbilder und Ressourcenbeschränkungen festlegen und den Dienst schreiben.yaml zum Erstellen zu erstellen
VS -Code -Verknüpfung, um sich auf das Explorer -Panel zu konzentrieren
Aug 08, 2025 am 04:00 AM
In VSCODE können Sie das Panel- und Bearbeitungsbereich durch Abkürzungsschlüssel schnell wechseln. Um zum linken Explorer -Feld zu springen, verwenden Sie die Strg -Verschiebung E (Windows/Linux) oder CMD Shift E (MAC). Kehren Sie in den Bearbeitungsbereich zurück, um Strg `oder ESC oder Strg 1 ~ 9 zu verwenden. Im Vergleich zum Mausbetrieb sind Tastaturverknüpfungen effizienter und unterbrechen den Codierungsrhythmus nicht. Weitere Tipps sind: Strg KCtrl E Fokus -Suchkästchen, F2 -Datei umbenennen, Datei löschen, die Öffnungsdatei eingeben, Pfeilschlüssel erweitern/kollapten.
Behoben: Windows Update konnte nicht installiert werden
Aug 08, 2025 pm 04:16 PM
RunthewindowsUpdatetrouBleshooterviaSettings> Update & Sicherheit> FehlerbehebungOautomatischfixcommonissues.2.
Was ist der Serialisierungsprozess für ein Java -Objekt?
Aug 08, 2025 pm 04:03 PM
JavaserializationConvertsanObject'SstateIntoAnabyTestreamForstorageOrtransmission, und Deserialization -ReconstructStheObjectFromThatstream.1. ToenableSerialization, aclassMustImplementtheSerializableInterface
Wie man eine Weile in Java einsetzt
Aug 08, 2025 pm 04:04 PM
AwhileloopinjavarePeadexecutesCodeaslongasttitionistre; 2.initializeacontrolvariableBeforetheloop;
Python Numpy Linear Algebra Beispiel
Aug 07, 2025 pm 04:52 PM
Numpy ist die Kernbibliothek für wissenschaftliches Computer in Python. Es ist gut darin, lineare Algebra -Operationen abzuwickeln und bietet effiziente NDARRAY -Arrays und Funktionen im Numpy.Linalg -Modul. 1. Verwenden Sie NP.Linalg.Solve (a, b), um das lineare Gleichungssystem AX = B zu lösen, um den Lösungsvektor x zu erhalten. 2. Die Matrixtransposition wird durch A.T implementiert; 3. Die Matrix -Multiplikation kann verwendet werden, um (a, b) oder a@b zu np.dot (a, b) verwendet werden. 4. Die Matrix -Inverse wird durch np.linalg.inv (a) berechnet, und die Matrix muss reversibel sein; 5. Die Determinante wird von np.Linalg.det (a) gegeben; 6. Der Eigenwert und Eigenvektor werden durch np.Linalg.eig (a) erhalten, und der Eigenvektor wurde normalisiert;
