Wie kann ich nur mit CSS eine scrollbare Tabelle mit festen Überschriften erstellen?

Nur ​​CSS-scrollbare Tabelle mit festen Überschriften

Diese Frage erfordert eine reine CSS-Lösung zum Erstellen scrollbarer Tabellen mit festen Überschriften. Zu den Anforderungen für diese Lösung gehören:

1. Spaltenausrichtung über Kopf- und Fußzeilen sowie Inhaltszeilen hinweg beibehalten
2. Kopf- und Fußzeile fixiert bleiben, während der Inhalt vertikal gescrollt wird
3. Verwenden Sie nur tabellenbezogene HTML-Tags (table, tr, th, td usw.) ohne JavaScript oder jQuery

Lösung mit der Eigenschaft „Position: Sticky“

Eine mögliche Lösung besteht darin, die Eigenschaft „Position: Sticky“ zu verwenden. So funktioniert es:

Verwendung der Position: Sticky

Sticky-Positionierung weist ein Element einer relativen Position zu, mit der Ausnahme, dass der Versatz in Bezug auf den nächsten Vorfahren beim Scrollen berechnet wird Box oder das Ansichtsfenster, wenn es keinen solchen Vorfahren gibt. Dieses Verhalten ist ideal für feste Tabellenköpfe.

Der Code

Der folgende Code demonstriert diese Technik:

div {
  display: inline-block;
  height: 150px;
  overflow: auto
}

table th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

/* == Just general styling, not relevant :) == */

table {
  border-collapse: collapse;
}

th {
  background-color: #1976D2;
  color: #fff;
}

th,
td {
  padding: 1em .5em;
}

table tr {
  color: #212121;
}

table tr:nth-child(odd) {
  background-color: #BBDEFB;
}

<div>
  <table border="0">
    <thead>
      <tr>
        <th>head1</th>
        <th>head2</th>
        <th>head3</th>
        <th>head4</th>
      </tr>
    </thead>
    <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>
    <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>
    <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>
    <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>
  </table>
</div>

Dieser Code Snippet platziert die Tabelle in einem Wrapper-Div mit einer Bildlaufleiste. Durch die Zuweisung von position: sticky zu den th-Elementen innerhalb der Tabellenüberschrift bleiben die Überschriften fixiert, während der Inhalt vertikal scrollt.

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