Wie erstelle ich mithilfe von CSS eine scrollbare Tabelle mit festen Überschriften?

Einrichten einer scrollbaren Tabelle mit festen Überschriften mithilfe von CSS

Ihre Tabelle verfügt sowohl über einen scrollbaren Hauptteil als auch über eine feste Überschrift, aber Sie sind sich nicht sicher, wie Sie diesen Effekt erzielen können . Um dieses Problem zu lösen, trennen wir die Header- und Body-Elemente in HTML mithilfe von und .

<table>
  <thead>
    <tr>
      <th>head1</th>
      <th>head2</th>
      <th>head3</th>
      <th>head4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>row 1, cell 1</td>
      <td>row 1, cell 2</td>
      <td>row 1, cell 2</td>
      <td>row 1, cell 2</td>
    </tr>
    <tr>
      <td>row 2, cell 1</td>
      <td>row 2, cell 2</td>
      <td>row 1, cell 2</td>
      <td>row 1, cell 2</td>
    </tr>
  </tbody>
</table>

Als nächstes setzen wir display: block für und um ihr Verhalten zu trennen und das Scrollen im Körper zu ermöglichen, ohne den Header zu beeinflussen.

table tbody, table thead {
  display: block;
}

Wir definieren die Überlauf- und Höheneigenschaften für den Körper:

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

Da der Kopf und der Körper sind visuell getrennt, aber technisch verknüpft, legen wir statische Breiten für die und Elemente, um eine ordnungsgemäße Spaltenausrichtung sicherzustellen.

th {
  width: 72px;
}

td {
  width: 72px;
}

Denken Sie daran, die richtige HTML-Formatierung einzufügen, z. B. für jede Zeile, einschließlich der Kopfzeile.

<tr>
  <th>head1</th>
  <th>head2</th>
  <th>head3</th>
  <th>head4</th>
</tr>

Das obige ist der detaillierte Inhalt vonWie erstelle ich mithilfe von CSS eine scrollbare Tabelle mit festen Überschriften?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!