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

Scrollbare Tabelle mit festen Überschriften mithilfe von CSS

Nur-CSS-Lösung für feste Überschriften

Problem:

Erstellen Sie eine scrollbare Tabelle mit festen Kopf- und Fußzeilen, indem Sie nur CSS und eine gültige Tabelle verwenden Tags, ohne dass JavaScript oder jQuery erforderlich ist. Stellen Sie sicher, dass die Spaltenausrichtung zwischen Kopf-, Fuß- und Inhaltszeilen konsistent bleibt.

Lösung:

Position verwenden: klebrig

1. Umschließen Sie die Tabelle in ein div: Dadurch wird der Bildlauf definiert Bereich.

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

   Nach dem Login kopieren

2. Position anwenden: auf Tabellenüberschriften kleben:

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

   Nach dem Login kopieren

Styling

Passen Sie das Erscheinungsbild der Tabelle an benötigt:

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;
}

Beispiel:

<div>
  <table border="0">
    <thead>
      <tr>
        <th scope="col">head1</th>
        <th scope="col">head2</th>
        <th scope="col">head3</th>
        <th scope="col">head4</th>
      </tr>
    </thead>
    <tbody>
      <!-- Insert rows here -->
    </tbody>
  </table>
</div>

Hinweis:

• Kompatibilität mit Position prüfen: Sticky, bevor Sie diese Lösung mit Ressourcen wie CanIUse verwenden.
• In einigen Browsern ist der Header möglicherweise nicht verfügbar perfekt auf den Inhalt abgestimmt. Passen Sie bei Bedarf den oberen Wert in der Sticky-Eigenschaft an.
• Diese Lösung ermöglicht nur vertikales Scrollen. Horizontales Scrollen wird nicht unterstützt.

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