ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS を使用して固定ヘッダーとスクロール可能な本文のテーブルを作成する方法

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

DDD
リリース: 2024-12-29 11:58:11
オリジナル
936 人が閲覧しました

How to Create a Fixed-Header, Scrollable-Body Table with CSS?

スクロール可能な本体を備えた固定ヘッダー テーブルを作成する方法

大規模なデータセットを扱う場合、多くの場合、固定ヘッダーとスクロール可能な本体を備えたテーブルを表示する必要があります。 。これにより、ユーザーは列ヘッダーを見失うことなくテーブル内を簡単に移動できるようになります。

残念ながら、この問題に対する最も簡単な解決策は、Bootstrap では機能しないか、スタイルを妨げます。

固定テーブルヘッド - CSS のみ

Chrome、Firefox、Edge の場合は、単に次の CSS を使用して、列ヘッダーをテーブルの上部に固定します:

.tableFixHead          { overflow: auto; height: 100px; }
.tableFixHead thead th { position: sticky; top: 0; z-index: 1; }

/* Just common table stuff. Really. */
table  { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; }
th     { background:#eee; }
ログイン後にコピー
<div class="tableFixHead">
  <table border="1">
    <thead>
      <tr><th>TH 1</th><th>TH 2</th></tr>
    </thead>
    <tbody>
      <tr><td>A1</td><td>A2</td></tr>
      <tr><td>B1</td><td>B2</td></tr>
      <tr><td>C1</td><td>C2</td></tr>
      <tr><td>D1</td><td>D2</td></tr>
      <tr><td>E1</td><td>E2</td></tr>
    </tbody>
  </table>
</div>
ログイン後にコピー

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート