HTML テーブルに固定ヘッダーと列を作成するにはどうすればよいですか?

固定ヘッダーと列を使用した HTML テーブルの作成

大量の HTML テーブルを操作する場合、重要な列ヘッダーを見失うとイライラすることがあります。スクロールすると行データが表示されます。ありがたいことに、固定ヘッダーと固定列を作成して簡単にナビゲーションできるようにする CSS と JavaScript のテクニックがあります。

固定ヘッダーと固定列を実現する方法:

これを実現するにはでは、次のアプローチを利用できます:

1. 固定ヘッダーを作成する: CSS を使用してテーブルの を修正します。 Position: Sticky プロパティを使用して要素を所定の位置に配置します。これにより、スクロールしても表の上部にヘッダーが表示されたままになります。
2. 最初の列を修正する: 最初の列を修正するには、
   を作成します。最初の列のセルをラップします。この

   の位置を設定します。これにより、列がビューポートの左端に固定されます。

   実装例:

   これは、この効果を達成するためのコード:

   <code class="html"><style>
     thead {
       position: sticky;
       top: 0;
     }
   
     .fixed-column {
       position: sticky;
       left: 0;
     }
   </style>
   
   <table>
     <thead>
       <tr>
         <th class="fixed-column">ID</th>
         <th>Name</th>
         <th>Age</th>
       </tr>
     </thead>
     <tbody>
       <!-- Data rows -->
     </tbody>
   </table></code>

   ログイン後にコピー

   注: jsBin の回答で提供されている例は、この手法の実際の実装を示しています。ただし、このアプローチには制限がある場合や、特定のブラウザ互換性要件に基づいた調整が必要になる場合があることに注意することが重要です。

以上がHTML テーブルに固定ヘッダーと列を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。