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

CSS を使用した固定ヘッダーを持つスクロール可能なテーブルの作成

過剰なデータによりスクロールが必要なテーブルを作成する場合、次のようにすると便利です。テーブルヘッダーは固定され、データ行は独立してスクロールします。この記事では、CSS を使用してこれを実現するための詳細な解決策を提供します。

解決策

固定ヘッダーを持つスクロール可能なテーブルを作成するには、ヘッダー要素をヘッダー要素から分離することが重要です。 を使用したデータ行そしてタグ。 CSS スタイルを適用して、表示とスクロールの動作を制御できます。

CSS スタイル:

table tbody, table thead {
  display: block;
}

table tbody {
  overflow: auto;
  height: 100px;
}

th {
  width: 72px;
}

td {
  width: 72px;
}

の display: block プロパティそしてヘッダー要素とボディ要素を分離し、それらが独立して動作できるようにします。オーバーフロー:

の自動と高さデータ行のスクロールを有効にします。両方の に静的な幅が設定されます。そして

注: が一致していることを確認してください。タグはヘッダー行とデータ行の両方に使用されます。

列幅の制御の強化:

table th:nth-child(1), td:nth-child(1) { min-width: 50px;  max-width: 50px; }
table th:nth-child(2), td:nth-child(2) { min-width: 100px; max-width: 100px; }
table th:nth-child(3), td:nth-child(3) { min-width: 150px; max-width: 150px; }
table th:nth-child(4), td:nth-child(4) { min-width: 200px; max-width: 200px; }

列幅が異なるテーブルの場合は、CSS を使用して最小幅と最大幅を指定します。 :この手法により、ヘッダーとデータ間の位置合わせを維持しながら、列幅をきめ細かく制御できます。行。

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