ヘッダーを固定したままスクロールバーを HTML テーブルに追加する方法

HTML テーブルにスクロールバーを表示する

HTML テーブルにスクロールバーを表示するには、次の方法を検討してください。

テーブルを所定の位置で包みますDiv

テーブルを相対位置または絶対位置を指定して div 要素で囲みます。この div は、スクロール可能な領域のコンテナとして機能します。

Div でオーバーフローを自動に設定します

CSS を適用しますプロパティ overflow:auto をコンテナ div に設定します。これにより、テーブルが境界を超えた場合のコンテンツのオーバーフローが可能になります。

#table-container { overflow: auto; }

テーブル ヘッダーを絶対位置に配置します

スクロール中にテーブル ヘッダーを固定したままにするには、thead 要素を絶対位置に配置します。

#table-header {position ： 絶対; }

コンテナの高さを設定します

スクロール可能な領域を定義するコンテナ div の高さを指定します。

#table-container { height: 400ピクセル; }

実装例

<div>
<pre class="brush:php;toolbar:false">#table-container {
  height: 400px;
  overflow: auto;
}

#table-header {
  position: absolute;
}

このアプローチでは、テーブル ヘッダーを上部に固定したままスクロールバーを提供します。