CSS を使用して固定ヘッダーを持つスクロール可能なテーブル本体を作成する方法

固定ヘッダーを使用してスクロール可能なテーブル本体を作成する

大きなテーブルを操作する場合、多くの場合、本体をスクロール可能にしながらヘッダーを固定する必要があります。スクロール可能であること。こうすることで、ユーザーは列見出しを見失うことなくデータ内を簡単に移動できます。

CSS 位置の使用: Sticky

Chrome、Firefox、 Edge は、シンプルな CSS ソリューションで、目的の動作を提供できます。位置を適用することで: スティッキー;トップ: 0;番目の要素にヘッダーをテーブルの上部に固定し、tbody を独立してスクロールできるようにすることができます。

.tableFixHead {
  overflow: auto;
  height: 100px;
}

.tableFixHead thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

追加 CSS

Toテーブルの外観と機能を強化し、必要に応じて追加の CSS を含めます。例:

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  padding: 8px 16px;
}

th {
  background: #eee;
}

HTML 構造

クラス「tableFixHead」の div 内に、thead 要素と tbody 要素を含むテーブルを追加します。

<div>

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