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

So erstellen Sie eine Tabelle mit einer festen Kopfzeile und einer festen Spalte nur mit CSS

Problem

Beim Bemühen, Daten auf organisierte Weise anzuzeigen möchten Sie eine HTML-Tabelle erstellen, die sowohl eine feste Kopfzeile als auch eine feste erste Spalte enthält. Ihre Erkundung hat jedoch eine Reihe von Lösungen aufgedeckt, die auf JavaScript oder jQuery basieren und potenzielle Nachteile für mobile Browser aufgrund eines nicht idealen Scrollverhaltens mit sich bringen. Daher konzentrieren Sie sich jetzt darauf, eine reine CSS-Lösung zu finden.

Lösung

Glücklicherweise bietet die Position: Sticky-Eigenschaft, die in modernen Versionen von Chrome, Firefox und Edge unterstützt wird, eine Möglichkeit dazu das gewünschte Verhalten erreichen. Sie können es mit der overflow: scroll-Eigenschaft kombinieren, um eine dynamische Tabelle mit festen Kopf- und Spaltenelementen zu erstellen.

Schritte

1. Container: Beginnen Sie mit der Platzierung Ihrer Tabelle innerhalb eines übergeordneten Divs und Anwenden eines Überlaufs: Scrollen Sie zum Div und ermöglichen Sie so das Scrollen.
2. Kopfzeile und Spalte Klebrigkeit: Nutzen Sie die Position: Sticky-Eigenschaft zusammen mit den Werten oben, rechts oder links, um anzugeben, an welchen Kanten die Tabellenelemente haften sollen.
3. Klebrigkeit der ersten Spaltenüberschrift: Nutzen Sie die Eigenschaft thead th:first-child, um sicherzustellen, dass die Überschrift der ersten Spalte auf der linken Seite fixiert bleibt Kante.

Beispiel

HTML-Markup:

<div class="container">
  <table>
    <thead>
      <tr>
        <th></th>
        <th>headheadhead</th>
        <th>headheadhead</th>
        <th>headheadhead</th>
        <th>headheadhead</th>
        <th>headheadhead</th>
        <th>headheadhead</th>
        <th>headheadhead</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>head</th>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
      </tr>
      <tr>
        <th>head</th>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
      </tr>
      <tr>
        <th>head</th>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
      </tr>
      <tr>
        <th>head</th>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
      </tr>
      <tr>
        <th>head</th>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
      </tr>
      <tr>
        <th>head</th>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
      </tr>
    </tbody>
  </table>
</div>

CSS:

div {
  max-width: 400px;
  max-height: 150px;
  overflow: scroll;
}

thead th {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  top: 0;
}

tbody th {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  left: 0;
}

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

thead th {
  background: #000;
  color: #FFF;
  z-index: 1;
}

tbody th {
  background: #FFF;
  border-right: 1px solid #CCC;
  box-shadow: 1px 0 0 0 #ccc;
}

table {
  border-collapse: collapse;
}

td,
th {
  padding: 0.5em;
}

Diese Implementierung ermöglicht es Ihnen, sowohl vertikal als auch horizontal zu scrollen, während die Kopfzeile und die erste Spalte an Ort und Stelle bleiben, wodurch ein verbesserte Benutzererfahrung beim Anzeigen tabellarischer Daten.

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