CSS と JavaScript を使用して水平および垂直スクロールバーを備えた固定ヘッダー テーブルを実装する方法

の水平スクロールバーと垂直スクロールバーを備えたヘッダー テーブルを修正しました。この質問は、HTML/CSS テーブルのスティッキー ヘッダーとスクロールバーの問題を解決します。コンテナのサイズが一定の値に達しました。

既存解決策

この問題は一般的であり、次のようなさまざまな解決策が提案されています。

• オーバーフローの切り捨てまたは非表示: これは実現できます。 overflow: hidden や text-overflow: ellipsis などの CSS プロパティを使用します。ただし、見た目が魅力的でないか、完全なデータが保持されない可能性があります。
• JavaScript ライブラリの使用: DataTables や ScrollTable などのいくつかの JavaScript ライブラリは、テーブル内に固定ヘッダーやスクロールバーを作成するためのソリューションを提供します。 。ただし、これらのソリューションには追加のコードや依存関係が必要になる場合があります。

CSS のみのソリューション

純粋な CSS では、すべてのシナリオで固定ヘッダーとスクロールバーを完全に実現できるわけではありませんが、部分的な解決策を提供できます:

/* Give the table a container with fixed height and scrolling */
#container {
  height: 400px;
  overflow-y: scroll;
}

/* Make the table header fixed */
#header {
  position: sticky;
  top: -1px;
}

CSS3 ソリューション (ではサポートされていません) IE8)

より良い制御と改善されたサポートのために、CSS3 プロパティを使用できます:

/* Give the table a container with fixed height and scrolling */
#container {
  height: 400px;
  overflow-y: scroll;
}

/* Make the table header fixed and set its width */
#header {
  position: sticky;
  top: 0;
  width: 100%;
}

注: これらのソリューションは、テーブルのヘッダーと本文が次のことを前提としています。固定幅を持っています。幅が固定されていない場合は、追加の CSS ルールまたは計算が必要になる場合があります。

以上がCSS と JavaScript を使用して水平および垂直スクロールバーを備えた固定ヘッダー テーブルを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。