スクロール時に HTML テーブルのヘッダーを表示したままにする方法

ラッパー Div を使用して HTML テーブルにスクロール バーを表示する

HTML テーブルを作成するとき、スクロール バーを表示する必要がある場合があります。テーブルのサイズがそのコンテナを超えている場合でも、テーブルのコンテンツを表示できるようにします。

実現するにはこれは、静的に配置されていない

<div> 内でテーブルをラップします。要素を作成し、それに overflow:auto CSS プロパティを割り当てます。これにより、表のコンテンツ用のスクロール可能な領域が作成されます。

スクロール中に表のヘッダー ( セクションにあります) を表示し続けるには、ヘッダーを絶対位置に設定し、スクロール領域の上に配置します。これにより、スクロール可能なコンテンツによってヘッダーが非表示になることがなくなります。

スクロール バーと固定ヘッダーの両方を組み込んだ例を次に示します。

CSS:

#table-wrapper {
  position: relative;
}
#table-scroll {
  height: 150px;
  overflow: auto;
  margin-top: 20px;
}
#table-wrapper table {
  width: 100%;
}
#table-wrapper table * {
  background: yellow;
  color: black;
}
#table-wrapper table thead th .text {
  position: absolute;
  top: -20px;
  z-index: 2;
  height: 20px;
  width: 35%;
  border: 1px solid red;
}

HTML:

<div>

この手法を適用すると、次のように、ヘッダーを表示したままスクロールできる HTML テーブルを作成できます。ユーザーが提供した例に示されています。