Wie erstelle ich einen festen Header für Bootstrap-3-Tabellen nur mit CSS?

Fester Header für Bootstrap-Tabellen

In Bootstrap 3 erfordert das Erstellen einer Tabelle mit einem festen Header eine reine CSS-Lösung. Die folgenden Schritte führen Sie durch den Prozess:

1. CSS-Klassen anwenden:Fügen Sie die folgenden CSS-Klassen zur Tabelle hinzu:

   • .tableFixHead zum enthaltenden div
   • .tableFixHead zum Tabellenkopf Zellen

2. CSS-Stil: Fügen Sie die folgenden CSS-Stile ein:

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

3. HTML Struktur: Stellen Sie sicher, dass Ihre Tabelle über den entsprechenden HTML-Code verfügt Struktur:

   <div class="tableFixHead">
     <table class="table">
       <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>

Durch die Implementierung dieser Lösung bleibt der Tabellenkopf an der Oberseite der Tabelle fixiert, sodass der Körper vertikal gescrollt werden kann.

Das obige ist der detaillierte Inhalt vonWie erstelle ich einen festen Header für Bootstrap-3-Tabellen nur mit CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!