Wie erstelle ich eine feste Kopfzeile und eine feste Tabelle in der ersten Spalte nur mit CSS?-CSS-Tutorial-php.cn

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

Patricia Arquette

Freigeben： 2024-12-17 08:48:25

Original

844 Leute haben es durchsucht

How to Create a Fixed Header and Fixed First Column Table Using Only 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

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.
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.
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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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!