Wie füge ich meiner HTML5-Tabelle eine Bildlaufleiste hinzu?

Einbinden einer Bildlaufleiste in eine HTML5-Tabelle

Um eine vertikale Bildlaufleiste in einer HTML5-Tabelle zu aktivieren, führen Sie die folgenden Schritte aus.

1. Scroll-Steuercode einbetten

Fügen Sie im CSS der Tabelle den folgenden Code ein, um vertikales Scrollen zu ermöglichen:

table#my_table {
  border-radius: 20px;
  background-color: transparent;
  color: black;
  width: 500px;
  text-align: center;
  overflow-y: scroll;
}

2. Beschränken Sie die Bildlaufleiste auf den Hauptinhalt

Wenn Ihre Tabelle eine Kopfzeile hat, verwenden Sie das folgende CSS, um das Scrollen zu verhindern:

table#my_table thead {
  position: sticky;
  top: 0;
  z-index: 1;
}

3. Verschärfen Sie den unteren Rand

Um die Benutzererfahrung zu verbessern, passen Sie den unteren Rand der Tabelle an:

table#my_table td, table#my_table th {
  border-bottom: 1px solid black;
}

4. Tischhöhe und -breite anpassen

Passen Sie die Höhe und Breite des Tisches nach Bedarf an:

table#my_table {
  height: 500px;
  width: 750px;
}

5. Optimieren Sie die Dicke der Bildlaufleiste (optional)

Für eine dünnere Bildlaufleiste sollten Sie die Verwendung der Eigenschaft „-webkit-scrollbar-width“ in Betracht ziehen:

table#my_table::-webkit-scrollbar {
  width: 10px;
}

Fazit:

Wenn Sie diese Schritte ausführen, wird Ihrer HTML5-Tabelle eine Bildlaufleiste hinzugefügt, sodass Benutzer nahtlos darin navigieren können Inhalt.

Das obige ist der detaillierte Inhalt vonWie füge ich meiner HTML5-Tabelle eine Bildlaufleiste hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!