Wie erstelle ich feste Tabellenüberschriften mit CSS?

Tabellenüberschriften mit CSS korrigieren

Das Erstellen einer Tabelle mit festen Überschriften kann die Lesbarkeit und Navigation verbessern, insbesondere beim Umgang mit großen Datensätzen. Lassen Sie uns untersuchen, wie Sie dies mithilfe von CSS erreichen:

Tabellenstruktur definieren

Die Tabelle sollte sowohl eine Kopfzeile als auch einen Textkörper enthalten, dargestellt durch und Elemente bzw. Jede Zeile sollte innerhalb eines Element, einschließlich der Kopfzeile.

Kopfzeile und Körper trennen

Um den Inhalt der Kopfzeile vom Körper zu trennen, verwenden Sie den Block display: sowohl für thead als auch für tbody. Dadurch werden sie vom Standardtabellenlayout getrennt.

Scrollen auf den Körper anwenden

Setzen Sie „overflow: auto“ auf „tbody“, um horizontales Scrollen zu ermöglichen, und wenden Sie eine Höhe an, um das zu begrenzen scrollbarer Bereich.

Breiten und Ausrichtung festlegen

Statische Breiten für th und td festlegen, um Spalten auszurichten. Stellen Sie sicher, dass Kopfzeile und Text die gleiche Gesamtbreite haben.

Zusätzliches CSS

Für mehr Kontrolle über die Spaltenbreiten verwenden Sie Selektoren für das n-te Kind mit minimaler und maximaler Breite -width-Eigenschaften. Dies ermöglicht unterschiedliche Spaltengrößen bei gleichzeitiger Beibehaltung der Ausrichtung.

Beispielcode

Hier ist ein Codeausschnitt, der eine Tabelle mit festen Überschriften zeigt:

table {
  width: 100%;
}

table tbody,
table thead {
  display: block;
}

table tbody {
  overflow: auto;
  height: 100px;
}

th,
td {
  width: 100px;
}

Das obige ist der detaillierte Inhalt vonWie erstelle ich feste Tabellenüberschriften mit CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!