CSSでテーブル表の一部を固定してスクロール可能にする方法

ウェブデザインの世界では、テーブルは情報を整理し表示するための強力なツールです。しかし、テーブル内に多くのデータがある場合、ページが過剰に長くなり、ユーザーエクスペリエンスに悪影響を及ぼす可能性があります。この問題に対処するため、我々はCSSの力を借りて、テーブルの一部を固定し、残りの部分をスクロール可能にする方法を探求します。

HTML
CSS
まとめ

HTML

まず、テーブル内のコンテンツを適切に区別するために、HTML構造を設定します。以下は基本的なテーブルのHTML構造です。

<table>
  <thead>
    <tr>
      <th>ヘッダー1</th>
      <th>ヘッダー2</th>
      <!-- 他のヘッダーセル -->
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>データ1</td>
      <td>データ2</td>
      <!-- 他のデータセル -->
    </tr>
    <!-- 他のデータ行 -->
  </tbody>
</table>

CSS

次に、以下のCSSを使用して、テーブルヘッダーを固定し、テーブルコンテンツをスクロール可能にします。

table {
  width: 100%;
  border-collapse: collapse;
}

thead {
  display: block;
  width: 100%;
  overflow: auto;
  position: sticky;
  top: 0;
  background-color: #fff; /* ヘッダーの背景色 */
}

th {
  background-color: #f0f0f0; /* ヘッダーの背景色 */
}

tbody {
  display: block;
  width: 100%;
  max-height: 300px; /* スクロール可能な高さを設定 */
  overflow: auto;
}

td, th {
  text-align: left;
  padding: 8px;
  border: 1px solid #ddd; /* ボーダースタイル */
}

/* スクロールバーのスタイルをカスタマイズする場合 */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 6px;
}

::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

このCSSコードにより、テーブルヘッダーが画面上部に固定され、テーブルの残りの部分がスクロール可能になります。必要に応じて高さやスタイリングを調整して、デザインに合わせてカスタマイズできます。