HTMLのテーブルの列を固定する方法

HTML CSS

HTMLのテーブルの列を固定する方法

HTMLのテーブルで列を固定するには、CSSを使って特定の列をスクロール時に固定表示する方法があります。
以下に、HTMLとCSSを分けて、列を固定する基本的な例を示します。

HTMLファイル (index.html)

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>固定列テーブル</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="test-table-container">
    <table class="test-table">
      <thead>
        <tr>
          <th class="test-fixed-column">固定列1</th>
          <th>列2</th>
          <th>列3</th>
          <th>列4</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="test-fixed-column">データ1</td>
          <td>データ2</td>
          <td>データ3</td>
          <td>データ4</td>
        </tr>
        <tr>
          <td class="test-fixed-column">データ5</td>
          <td>データ6</td>
          <td>データ7</td>
          <td>データ8</td>
        </tr>
        <!-- 追加の行 -->
      </tbody>
    </table>
  </div>
</body>
</html>

CSSファイル (styles.css)

.test-table-container {
  position: relative;
  overflow: auto;
  width: 100%;
  max-height: 300px; /* 高さを調整 */
}

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

.test-table th,
.test-table td {
  border: 1px solid #ddd;
  padding: 8px;
}

.test-table thead th {
  background-color: #f4f4f4;
}

.test-fixed-column {
  position: sticky;
  left: 0;
  background-color: #fff; /* 背景色を設定 */
  z-index: 2; /* 他の列よりも前面に表示 */
}

.test-table thead th.test-fixed-column {
  top: 0;
  z-index: 3; /* ヘッダーが他の内容よりも前面に表示 */
}

説明

1. HTML構造:

  • tableタグでテーブルを作成し、theadでヘッダー行を、tbodyでデータ行を定義しています。
  • thやtdにtest-fixed-columnクラスを指定して、固定する列を特定します。

2. CSSスタイル:

  • test-table-containerクラスで、テーブルのコンテナにスクロール機能を設定し、高さを制限します。
  • test-tableクラスで、テーブルの幅を100%に設定し、セルの境界線とパディングを指定します。
  • test-fixed-columnクラスで、position: stickyを使って列をスクロール時に固定し、背景色と前面表示を設定します。
  • ヘッダーのtest-fixed-columnに対してもposition: stickyを設定し、top: 0でヘッダーの位置を固定します。

この方法で、特定の列をスクロール時に固定することができます。