Wie erstelle ich eine scrollbare HTML-Tabelle mit festen Überschriften und erster Spalte?

Scrollbare HTML-Tabelle mit festen Überschriften und erster Spalte erstellen

Wie erstellt man eine HTML-Tabelle mit festen Spaltenüberschriften und einer ersten Spalte, die bleibt beim Scrollen durch den Tabelleninhalt sichtbar?

Antwort:

Um diesen Effekt zu erzielen, können Sie eine Kombination aus CSS und JavaScript verwenden. So geht's:

1. Erstellen Sie eine HTML-Tabelle:

<code class="html"><table>
  <thead>
    <tr>
      <th>Column 1 Header</th>
      <th>Column 2 Header</th>
      <th>Column 3 Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <!-- more table rows -->
  </tbody>
</table></code>

2. CSS für feste Überschriften und erste Spalte:

<code class="css">table {
  width: 100%;
  overflow: scroll;
}

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

table tr td:first-child {
  position: sticky;
  left: 0;
}</code>

Dieses CSS sorgt dafür, dass die Tabellenüberschriften beim Scrollen am oberen Bildschirmrand fixiert werden und die erste Spalte links fixiert bleibt.

3. Erweitertes Beispiel:

Sie können auch das erweiterte CSS-Raster verwenden, um einen ähnlichen Effekt mit besserer Unterstützung für Reaktionsfähigkeit und Bildschirmleseprogramme zu erzielen:

<code class="css">table {
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-template-rows: auto 1fr;
}

table thead {
  grid-row: 1;
  grid-column: 1 / -1;
}

table tr {
  grid-column: 1 / -1;
}

table tr td:first-child {
  grid-column: 1;
}

table tbody {
  overflow: scroll;
}</code>

Hinweis: Die bereitgestellten Beispiele erfordern möglicherweise einige Anpassungen, abhängig von Ihrem spezifischen Tabellendesign und Ihren Browserkompatibilitätsanforderungen.

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