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

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

固定ヘッダーに対する CSS のみのソリューション

問題:

固定ヘッダーを持つスクロール可能なテーブルを作成するJavaScript や jQuery を必要とせず、CSS と有効なテーブル タグのみを使用してフッターを作成します。ヘッダー、フッター、およびコンテンツ行間で列の配置が一貫していることを確認します。

解決策:

使用位置: Sticky

1. テーブルをラップで包みますdiv: これはスクロール領域を定義します。

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

   ログイン後にコピー

2. 適用位置: テーブルに固定headers:

   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>
      <!-- Insert rows here -->
    </tbody>
  </table>
</div>

注:

• 位置との互換性を確認してください:このソリューションを使用する前に、CanIUse などのリソースを使用してください。
• 一部のブラウザでは、ヘッダーがコンテンツと完全に一致しない場合があります。必要に応じて、スティッキー プロパティの上部の値を調整します。
• このソリューションでは垂直スクロールのみが可能です。水平スクロールはサポートされていません。

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