HTML と CSS を使用して、固定ヘッダーと固定列を備えたスクロール可能なテーブルを作成する

テーブルは、構造化データを表示するための Web アプリケーションの基本です。スクロール可能なヘッダーや固定 (固定) 列などの機能を追加すると、テーブルがさらに使いやすくなります。この記事では、純粋な HTML と CSS を使用して、固定ヘッダーと固定された左側の列を持つテーブルを作成する方法を説明します。

コードペンの例

実際のコードを確認するには、CodePen のこのライブサンプルをチェックしてください。
このコード例では、JS クラスを使用してテーブルを作成します。これは、任意のフレームワークまたはライブラリで複製できます。

テーブルの主な特徴

• スティッキーヘッダー: 垂直方向にスクロールすると、表のヘッダーが上部に表示されたままになります。
• 左列の固定: 水平方向にスクロールしても、最初の列は固定されたままになります。
• スクロール可能なコンテンツ: 垂直スクロールと水平スクロールの両方がサポートされています。
• カスタマイズ可能なスタイル: テーブルのデザインはクリーンでモダンで、ゼブラストライプとホバー効果が付いています。

HTMLの構造

を含む単純なテーブル構造を使用します。ヘッダーと

の場合列のために。スクロールしやすくするために、テーブルは div でラップされています。コードは次のとおりです:

<div>



<h2>
  
  
  CSS for Sticky Header and Frozen Column
</h2>

<p>Here’s the CSS that makes the magic happen:<br>
</p>

<pre class="brush:php;toolbar:false">/* General styles */
body {
  font-family: Arial, sans-serif;
}

/* Scrollable container */
.table-container {
  border: 1px solid #e5e7eb;
  border-bottom: none;
  overflow: auto; /* Enables both horizontal and vertical scrolling */
  height: 400px; /* Limits table height for vertical scrolling */
}

/* Table layout */
.table {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed; /* Ensures consistent column widths */
}

/* Table cells and headers */
.table th,
.table td {
  padding: 8px;
  text-align: center;
  border: 1px solid #e5e7eb;
}

/* Frozen first column */
.table td:nth-child(1),
.table th:nth-child(1) {
  background: red; /* Highlighted background for frozen column */
  position: sticky;
  left: 0; /* Ensures the column stays on the left */
  z-index: 5; /* Keeps the column above other cells */
  color: white;
}

/* Add higher z-index for header */
.table th:nth-child(1) {
  z-index: 6;
}

/* Sticky header */
.table th {
  background-color: #1e3a8a;
  color: white;
  font-size: 14px;
  font-weight: bold;
  position: sticky;
  top: 0; /* Makes the header stick to the top */
  z-index: 2; /* Keeps the header above the table body */
}

/* Styling for table body */
.table td {
  font-size: 14px;
  color: #6b7280;
}

/* Zebra striping for rows */
.table tr:nth-child(odd) {
  background-color: #f9fafb;
}

/* Hover effect for rows */
.table tr:hover {
  background-color: rgba(14, 116, 144, 0.1);
}

/* No data row styling */
.no-data {
  text-align: center;
  font-size: 14px;
  color: #9ca3af;
}

CSSの説明

スクロール可能なコンテナ:

.table-container クラスは、水平スクロールと垂直スクロールの両方を有効にするために overflow: auto を追加します。 height: 400px プロパティはテーブルの高さを制限し、より大きなデータセットの垂直スクロールを保証します。

スティッキーヘッダー:

position: Sticky プロパティと top: 0 プロパティが

要素に適用され、垂直スクロール中にヘッダーが表示されたままになります。 z-index: 2 は、ヘッダーがテーブル本体の上に表示されるようにします。

固定された左列:

最初の列は、

の nth-child(1) セレクターを使用してスタイル設定されます。
Position: Sticky プロパティと left: 0 プロパティにより、水平スクロール中に列が所定の位置に留まります。 Z インデックス値は、列のセル (5) とヘッダー (6) を区別して、適切な階層化を保証します。

凍結された列を強調表示する:

凍結された列の背景色は赤に設定され、視認性を高めるために白のテキストが表示されます。これは、デザインの好みに合わせてカスタマイズできます。

どのように連携するか

垂直方向にスクロールすると、position: スティッキー ヘッダーが .table-container の上部に残ります。
水平にスクロールすると、左端の列が固定されたままとなり、列が固定された効果が生じます。
overflow: auto とposition: Stickyの組み合わせにより、両方の軸にわたってテーブルの機能性と使いやすさが確保されます。

追加できる機能拡張

レスポンシブ調整:
メディア クエリを使用して、小さな画面の列幅とテーブル レイアウトを調整します。

動的コンテンツの読み込み:

JavaScript を使用して、より大きなデータセットの行を動的にフェッチし、データを追加します。

インタラクティブな機能:

JavaScript を使用して行クリック イベント、フィルタリング、並べ替えを追加し、機能を強化します。

最終的な考え

標準の

を使用する要素と数行の CSS を使用して、固定ヘッダーと固定された左列を備えた強力で応答性の高いテーブルを作成しました。このアプローチは軽量で実装が簡単で、最新のブラウザ間でシームレスに動作します。

ダッシュボードの構築、レポートの表示、または大規模なデータセットの処理のいずれの場合でも、この方法により、ユーザーフレンドリーでクリーンでプロフェッショナルなデザインが保証されます。試してみて、あなたのプロジェクトでどのように機能するか教えてください。 ?