Comment créer un en-tête fixe pour les tables Bootstrap 3 en utilisant uniquement CSS ?

En-tête fixe pour les tables Bootstrap

Dans Bootstrap 3, la création d'une table avec un en-tête fixe nécessite une solution CSS uniquement. Les étapes suivantes vous guideront tout au long du processus :

1. Appliquer les classes CSS : Ajoutez les classes CSS suivantes au tableau :

   • .tableFixHead au div contenant
   • .tableFixHead à l'en-tête de la table cellules

2. Style CSS : Insérez les styles CSS suivants :

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

3. HTML Structure : Assurez-vous que votre tableau contient le code HTML approprié structure :

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

En mettant en œuvre cette solution, la tête de table restera fixe en haut de la table, permettant de faire défiler le corps verticalement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!