CSS だけで、固定ヘッダーを備えたクロスブラウザ互換のスクロール可能なテーブルを作成できますか?-CSSチュートリアル-php.cn

固定ヘッダーを持つ CSS のみのスクロール可能なテーブル

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS だけで、固定ヘッダーを備えたクロスブラウザ互換のスクロール可能なテーブルを作成できますか?

Patricia Arquette

Dec 06, 2024 pm 01:39 PM

Can CSS Alone Create a Cross-Browser Compatible Scrollable Table with Fixed Headers?

固定ヘッダーを持つ CSS のみのスクロール可能なテーブル

質問:

スクロール可能なテーブルを作成するための CSS のみのソリューションはありますかクロスブラウザーの固定ヘッダーを持つテーブル準拠していますか?

要件:

ヘッダー、フッター、コンテンツ行間の列の配置を維持します
ヘッダーとフッターを固定したままにしますコンテンツは垂直にスクロールします
jQuery または JavaScript なし必須
テーブル関連のタグ (table、thead、tbody、tr、th、td) のみを使用します

Position: Sticky:

を使用した解決策

互換性に関する注意: これを使用する前に、position:sticky のサポートを確認してください。 solution.

position:sticky は、最も近いスクロール祖先、またはスクロール祖先がない場合はビューポートを基準にして要素を配置します。この動作は、目的のスティッキーヘッダーと一致します。

ただし、position:sticky を

、、またはに割り当てると、タグはさまざまなブラウザーで問題に遭遇します。代わりに、スティッキープロパティを

に割り当てます。スクロールオーバーフローを定義するラッパー要素内のセル。

コード:

div {
  display: inline-block;
  height: 150px;
  overflow: auto;
}

table th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

/* Styling */
table {
  border-collapse: collapse;
}

th {
  background-color: #1976D2;
  color: #fff;
}

th,
td {
  padding: 1em .5em;
}

table tr {
  color: #212121;
}

table tr:nth-child(odd) {
  background-color: #BBDEFB;
}

ログイン後にコピー

<div>
  <table border="0">
    <thead>
      <tr>
        <th scope="col">head1</th>
        <th scope="col">head2</th>
        <th scope="col">head3</th>
        <th scope="col">head4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
        <td>row 1, cell 2</td>
        <td>row 1, cell 2</td>
      </tr>
      <!-- additional rows omitted for brevity -->
    </tbody>
  </table>
</div>

ログイン後にコピー

以上がCSS だけで、固定ヘッダーを備えたクロスブラウザ互換のスクロール可能なテーブルを作成できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。