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
React realisiert sekundären Verknüpfungseffekt (Treppeneffekt)
In diesem Artikel wird der spezifische Code von R...
Zusammenfassung einiger Probleme, die bei der Integration von E-Charts mit vue.js aufgetreten sind
Vorwort Ich arbeite derzeit an der Datenanalysepl...
Detaillierte Erläuterung der Installation von jdk1.8 und der Konfiguration von Umgebungsvariablen in einer Linux-ähnlichen Umgebung
Die Konfiguration ist sehr einfach, aber ich muss...
Grundlegendes zu MySQL-Sperren basierend auf Update-SQL-Anweisungen
Vorwort Die MySQL-Datenbanksperre ist ein wichtig...
MySQL-Löschfunktion für Mehrfachtabellenverbindungen
Löschen einer einzelnen Tabelle: LÖSCHEN AUS Tabe...
Asynchroner Lebenszyklus von AsyncHooks in Node8
Async Hooks ist eine neue Funktion von Node8. Sie...
Hinzufügen und Löschen von Tabelleninformationen mit Javascript
Erste Schritte mit JavaScript JavaScript ist eine...
Eine kurze Diskussion über die Lösung des Problems der nativen Seitenkompatibilität mit IE9
Vorwort Vor Kurzem habe ich die native Seite eine...
Eine kurze Erläuterung des Navigationsfensters in Iframe-Webseiten
Eine kurze Erläuterung des Navigationsfensters in...
Interpretation der Vue-Komponentenregistrierungsmethode
Inhaltsverzeichnis Überblick 1. Globale Registrie...
CentOS6.8 verwendet cmake zur Installation von MySQL5.7.18
Unter Bezugnahme auf die Online-Informationen hab...
Beispiel für die Implementierung der Wertübertragung zwischen WeChat-Miniprogrammseiten
Übergeben von Werten zwischen Miniprogrammseiten ...
So implementieren Sie den neuen Operator von JavaScript selbst
Inhaltsverzeichnis Konstruktor neuer Operator Imp...
Beispielcode für Datenbanksicherung in einer Docker-Umgebung (PostgreSQL, MySQL)
Inhaltsverzeichnis Posgresql-Sicherung/Wiederhers...
Detaillierte Erläuterung der Nginx-Frontend-Verteilungsmethode basierend auf $remote_addr
Die Voraussetzungen sind wie folgt: Unter dem Dom...