Wie erstelle ich eine feste Kopfzeile und Spalte in einer Tabelle nur mit CSS?

Feste Kopfzeile und Spalte in einer Tabelle mit reinem CSS

Das Erstellen einer Tabelle mit einer festen Kopfzeile und einer festen ersten Spalte mit reinem CSS ist möglich Dies kann mithilfe der Position: Sticky-Eigenschaft erreicht werden. Dieser Ansatz ist effizienter und browserübergreifend kompatibel als Lösungen, die auf JavaScript oder jQuery basieren.

Lösung:

1. Schließen Sie den Tisch in einem Container:

   `

   `

2. Scrollen im Container aktivieren:

   `div.container {
   overflow: scroll;
   }`

3. Klebe den Tisch header:

   `thead th {
   position: -webkit-sticky; / für Safari /
   Position: sticky;
   top: 0;
   }`

4. Sticky die erste Spalte:

   `tbody th {
   Position: -webkit-sticky; / für Safari /
   Position: sticky;
   links: 0;
   }`

5. Optional: Sticky die Überschrift der ersten Spalte oben links:

   `thead th:first-child {
   links: 0;
   z-index: 2;
   }`

Zusätzliche Hinweise:

• Für eine optimale Leistung sollte der Container eine maximale Breite und Höhe haben.
• Wenn die erste Spalte enthält Elemente anstelle von verwenden Sie tbody td:first-child in CSS anstelle von tbody th.
• Um die Kopfzeile und die erste Spalte weiter zu formatieren, passen Sie die CSS-Eigenschaften nach Bedarf an.

Beispiel:

<div class="container">
  <table border="1">
    <thead>
      <tr>
        <th>#</th>
        <th>Name</th>
        <th>Email</th>
        <th>Phone</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>1</th>
        <td>John Doe</td>
        <td>john@example.com</td>
        <td>(555) 123-4567</td>
      </tr>
      <tr>
        <th>2</th>
        <td>Jane Smith</td>
        <td>jane@example.com</td>
        <td>(555) 234-5678</td>
      </tr>
      <!-- More rows... -->
    </tbody>
  </table>
</div>

div.container {
  max-width: 500px;
  max-height: 300px;
  overflow: scroll;
}

thead th {
  position: sticky;
  top: 0;
}

tbody th {
  position: sticky;
  left: 0;
}

thead th:first-child {
  left: 0;
  z-index: 2;
}

Das obige ist der detaillierte Inhalt vonWie erstelle ich eine feste Kopfzeile und Spalte in einer Tabelle nur mit CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!