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
Detaillierte Erläuterung des MySQL Multi-Version Concurrency Control Mechanism (MVCC)-Quellcodes
Inhaltsverzeichnis 1. Einleitung 2. MVCC (Multi-V...
Binäre Installation von MySQL 5.7.23 unter CentOS7
Die Installationsinformationen im Internet sind u...
18 erstaunliche Verbindungen zwischen Interaktionsdesign und Psychologie
Designer müssen Psychologie verstehen, indem sie ...
Vue implementiert die Anzeige und Ausblendung der dreistufigen Navigation
In diesem Artikelbeispiel wird der spezifische Co...
Erweiterte benutzerdefinierte JavaScript-Ausnahme
Inhaltsverzeichnis 1. Konzept 1.1 Was sind Fehler...
MySQL ermöglicht langsame Abfragen (Einführung in die Verwendung der EXPLAIN-SQL-Anweisung)
Heutzutage werden Datenbankoperationen immer häuf...
JSON (JavaScript Object Notation) in einem Artikel verstehen
Inhaltsverzeichnis JSON wird angezeigt JSON-Struk...
Detailliertes Tutorial zur Installation von MySQL 8.0.22 auf Redhat 7.3 (binäre Installation)
Inhaltsverzeichnis 1. Laden Sie das MySQL-Install...
Verständnis und Lösungen für 1px-Linien in der mobilen Entwicklung
Gründe, warum die 1px-Linie dicker wird Wenn wir ...
Eine kurze Diskussion über den virtuellen Speicher von Linux
Inhaltsverzeichnis Herkunft Virtueller Speicher P...
So stellen Sie ElasticSearch in Docker bereit
1. Was ist ElasticSearch? Elasticsearch wird eben...
Detaillierte Diskussion über Speicher und Variablenspeicher in JS
Inhaltsverzeichnis Vorwort JS Magische Zahl Numme...
Vollständige Schritte zur Verwendung von Nginx+Tomcat zum Lastenausgleich unter Windows
Vorwort Heute erklärt Ihnen Prince die vollständi...
So finden Sie Websites mit SQL-Injection (unbedingt lesen)
Methode 1: Verwenden Sie die erweiterte Suche von...
Ein Tutorial zur Installation, Verwendung und automatischen Kompilierung von TypeScript
1. Einführung in TypeScript Im vorherigen Artikel...