CSS のみを使用して Bootstrap 3 テーブルの固定ヘッダーを作成する方法

ブートストラップ テーブルの固定ヘッダー

ブートストラップ 3 では、固定ヘッダーを持つテーブルを作成するには CSS のみのソリューションが必要です。次の手順に従ってプロセスを進めてください:

1. CSS クラスの適用: 次の CSS クラスをテーブルに追加します:

   • .tableFixHead を含む div
   • .tableFixHead をテーブル ヘッダーに追加セル

2. CSS スタイル: 次の CSS スタイルを挿入します:

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

   ログイン後にコピー

3. HTML構造: テーブルに適切な HTML があることを確認してください。構造:

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

   ログイン後にコピー

このソリューションを実装すると、テーブルの見出しがテーブルの上部に固定されたままになり、本文を垂直にスクロールできるようになります。

以上がCSS のみを使用して Bootstrap 3 テーブルの固定ヘッダーを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。