CSS を使用して固定テーブルヘッダーを作成するには?

CSS を使用したテーブル ヘッダーの固定

固定ヘッダーを使用してテーブルを作成すると、特に大規模なデータセットを扱う場合に、読みやすさとナビゲーションが向上します。 CSS を使用してこれを実現する方法を見てみましょう。

テーブル構造を定義する

テーブルには、 で表されるヘッダーと本文の両方が含まれている必要があります。そしてそれぞれの要素。各行は 内にある必要があります。

ヘッダーと本文を分離する

ヘッダーの内容を本文から分離するには、thead と tbody の両方に display: block を使用します。これにより、デフォルトのテーブル レイアウトからそれらが切り離されます。

本文にスクロールを適用します

本文に overflow: auto を設定して水平スクロールを有効にし、高さを適用して制限します。

幅と配置を設定

列を配置するために th と td の両方に静的な幅を設定します。ヘッダーと本文の合計幅が同じであることを確認してください。

追加の CSS

列幅をさらに制御するには、min-width と max を指定した n 番目の子セレクターを使用します。 -width プロパティ。これにより、配置を維持しながら列サイズを変更できます。

サンプル コード

固定ヘッダーを持つテーブルを示すコード スニペットを次に示します。

table {
  width: 100%;
}

table tbody,
table thead {
  display: block;
}

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

th,
td {
  width: 100px;
}

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