Wie erstelle ich mit CSS eine Tabelle mit festem Kopf und scrollbarem Körper?

So erstellen Sie eine Tabelle mit festem Kopf und scrollbarem Körper

Bei der Arbeit mit großen Datensätzen ist es oft notwendig, eine Tabelle mit festem Kopf und scrollbarem Körper anzuzeigen . Dadurch können Benutzer problemlos in der Tabelle navigieren, ohne den Überblick über die Spaltenüberschriften zu verlieren.

Leider funktionieren die einfachsten Lösungen für dieses Problem entweder nicht mit Bootstrap oder beeinträchtigen das Styling.

Fester Tabellenkopf – nur CSS

Verwenden Sie für Chrome, Firefox und Edge einfach das folgende CSS, um die Spaltenüberschriften zu erstellen klebt oben auf dem Tisch:

.tableFixHead          { overflow: auto; height: 100px; }
.tableFixHead thead th { position: sticky; top: 0; z-index: 1; }

/* Just common table stuff. Really. */
table  { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; }
th     { background:#eee; }

<div class="tableFixHead">
  <table border="1">
    <thead>
      <tr><th>TH 1</th><th>TH 2</th></tr>
    </thead>
    <tbody>
      <tr><td>A1</td><td>A2</td></tr>
      <tr><td>B1</td><td>B2</td></tr>
      <tr><td>C1</td><td>C2</td></tr>
      <tr><td>D1</td><td>D2</td></tr>
      <tr><td>E1</td><td>E2</td></tr>
    </tbody>
  </table>
</div>

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit CSS eine Tabelle mit festem Kopf und scrollbarem Körper?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!