How to Create a Fixed Header for Bootstrap 3 Tables Using Only CSS?

Fixed Header for Bootstrap Tables

In Bootstrap 3, creating a table with a fixed header requires a CSS-only solution. The following steps will guide you through the process:

1. Apply CSS Classes: Add the following CSS classes to the table:

   • .tableFixHead to the containing div
   • .tableFixHead thead th to the table header cells

2. CSS Styling: Insert the following CSS styles:

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

3. HTML Structure: Ensure your table has the appropriate HTML 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>

By implementing this solution, the table head will remain fixed at the top of the table, allowing the body to be scrolled vertically.

The above is the detailed content of How to Create a Fixed Header for Bootstrap 3 Tables Using Only CSS?. For more information, please follow other related articles on the PHP Chinese website!