Der Tabellenkörper in HTML kann nach oben und unten sowie nach links und rechts verschoben werden.
|
Wenn der Tabellenkopf fixiert ist, muss er in zwei Tabellen aufgeteilt werden: ein Teil ist thead und der andere Teil ist tbody. Die spezifische Implementierung ist wie folgt: HTML Quelltext:
<div Klasse="Tabelle_Box_groß">
<div Klasse="Tabellenfeld">
<Tabelle>
<Kopf>
<tr>
<th><div>Titel 1</div></th>
<th><div>Titel 2</div></th>
<th><div>Titel Drei</div></th>
<th><div>Titel Titel Titel Titel Titel Titel Titel Titel Titel Titel Titel 4</div></th>
<th><div>Titel Titel Titel Titel Titel Titel Titel Titel Titel Titel Titel Titel Fünf</div></th>
<th><div>Titel Titel Titel Titel Titel Titel Titel Titel Titel Titel Titel Titel Sechs</div></th>
</tr>
</thead>
</Tabelle>
<div Klasse="table_tbody_box">
<Tabelle>
<tr>
<td>Information 1</td>
<td>Informationen 2</td>
<td>Information Drei</td>
<td>Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Vier</td>
<td>Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Fünf</td>
<td>Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen sechs</td>
</tr>
<tr>
<td>Information 1</td>
<td>Informationen 2</td>
<td>Information Drei</td>
<td>Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Vier</td>
<td>Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Fünf</td>
<td>Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen sechs</td>
</tr>
<tr>
<td>Information 1</td>
<td>Informationen 2</td>
<td>Information Drei</td>
<td>Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Vier</td>
<td>Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Fünf</td>
<td>Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen sechs</td>
</tr>
<tr>
<td>Information 1</td>
<td>Informationen 2</td>
<td>Information Drei</td>
<td>Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Vier</td>
<td>Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Fünf</td>
<td>Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen sechs</td>
</tr>
<tr>
<td>Information 1</td>
<td>Informationen 2</td>
<td>Information Drei</td>
<td>Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Vier</td>
<td>Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Fünf</td>
<td>Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen sechs</td>
</tr>
<tr>
<td>Information 1</td>
<td>Informationen 2</td>
<td>Information Drei</td>
<td>Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Vier</td>
<td>Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Fünf</td>
<td>Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen sechs</td>
</tr>
<tr>
<td>Information 1</td>
<td>Informationen 2</td>
<td>Information Drei</td>
<td>Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Vier</td>
<td>Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Fünf</td>
<td>Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen sechs</td>
</tr>
<tr>
<td>Information 1</td>
<td>Informationen 2</td>
<td>Information Drei</td>
<td>Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Vier</td>
<td>Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Fünf</td>
<td>Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen Informationen sechs</td>
</tr>
</Tabelle>
</div>
</div>CSS-Stil:
.table_box_big {
Überlauf-x: scrollen;
Überlauf-y: versteckt;
Position: relativ;
Höhe: 350px;
}
.Tabellenbox {
Überlauf: versteckt;
Position: absolut;
}
.Tabelle_tbody_box {
Höhe: 300px;
Überlauf: scrollen;
}
Tisch {
Rand: 1px durchgezogen #eeeeee;
}
Tabelle thead tr th {
Breite: 80px;
Höhe: 50px;
Rahmen rechts: 1px durchgezogen #eeeeee;
Textausrichtung: zentriert;
Worttrennung: alles behalten;
Polsterung: 2px 10px;
Hintergrund: himmelblau;
}
Tabelle tbody tr td {
Breite: 80px;
Höhe: 50px;
Rahmen rechts: 1px durchgezogen #eeeeee;
Textausrichtung: zentriert;
Rahmen unten: 1px durchgezogen #eeeeee;
Worttrennung: alles behalten;
Polsterung: 2px 10px;
}
Die Wirkung ist wie folgt:
Dies ist das Ende dieses Artikels über den festen Tabellenkopf in HTML und den Tbody der Tabelle, der nach oben, unten, links und rechts verschoben werden kann. Weitere relevante Inhalte zum festen Tabellenkopf in HTML finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird! |
>>: Kann CSS auf diese Weise verwendet werden? Die Kunst wunderlicher Farbverläufe
Artikel empfehlen
Detailliertes Tutorial zur JDK-Installation und Umgebungsvariablenkonfiguration unter Win10
Inhaltsverzeichnis Vorwort 1. Vorbereitung 2. Ins...
So führen Sie MySQL in einer Docker-Umgebung aus und aktivieren Binlog, um die Master-Slave-Synchronisierung zu konfigurieren
Derselbe Server simuliert die Master-Slave-Synchr...
Lösung für das Problem der MySQL-Transaktionsparallelität
Ich bin während der Entwicklung auf ein solches P...
Objektorientierte JavaScript-Implementierung eines Lupengehäuses
In diesem Artikel wird der spezifische Code der o...
Verwenden von Textschatten- und Elementschatteneffekten in CSS
Einführung in Textschatten Verwenden Sie in CSS d...
Reines CSS zum Erreichen einer einzelnen Div-Transformation eines regulären Polygons
Im vorherigen Artikel haben wir vorgestellt, wie ...
Größe von PNG-Bildern mit CSS-Maske deutlich optimieren (empfohlen)
Dieser Artikel darf gerne geteilt und zusammengef...
Detaillierte Erklärung zur Verwendung von Filtereigenschaften in CSS3
Als ich kürzlich das Intranet-Portal änderte, sti...
Get/Delete-Methode zum Übergeben von Array-Parametern in Vue
Wenn Front-End und Back-End interagieren, müssen ...
Docker verwendet CMD- oder ENTRYPOINT-Befehle, um mehrere Dienste gleichzeitig zu starten
Voraussetzung: Celery wird in Django eingeführt. ...
So zeigen Sie den Datenbankinstallationspfad in MySQL an
Wir können den Installationspfad von MySQL über d...
Beispiele für Optimierungstechniken zur Verbesserung der Effizienz langsamer Abfragen in MySQL IN-Anweisungen
Die Tabellenstruktur ist wie folgt. Es gibt nur 6...
HTML+CSS zum Erstellen eines Dropdown-Menüs
1. Beispiel einer Dropdown-Liste Der Code lautet ...
MySQL-Fehlernummer 1129 – Lösung
SQLyog stellt eine Verbindung zu MySQL her, Fehle...
Analyse des Unterschieds zwischen der Verwendung von Left Join-Einstellungsbedingungen in „on“ und „where“ in MySQL
Dieser Artikel veranschaulicht anhand von Beispie...