テーブルの固定列とスクロール

日本語で解説する：HTML テーブルの固定列とスクロール可能な本体

HTML、CSS、HTML テーブルを用いて、左側の列を固定し、残りの部分をスクロール可能なテーブルを作成する方法を解説します。

HTML 構造

まず、基本的なHTMLテーブル構造を構築します。ここで、左側の固定列を<thead>内に、スクロール可能な部分を<tbody>内に配置します。

<table>
  <thead>
    <tr>
      <th>固定列</th>
      <th>スクロール可能な列</th>
      </tr>
  </thead>
  <tbody>
    <tr>
      <td>データ1</td>
      <td>スクロール可能なデータ1</td>
      </tr>
    </tbody>
</table>

CSS スタイル

次に、CSSを使用して、左側の列を固定し、スクロール可能な部分を設定します。

table {
  width: 100%;
  overflow-x: auto;
}

thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
}

• z-index: 1;：他の要素よりも上に表示します。
• left: 0;：固定された列を左端に配置します。
• position: sticky;：左側の列を固定します。
• overflow-x: auto;：テーブルの横方向のスクロールバーを表示します。

解説

1. HTML構造
   テーブルを<thead>と<tbody>に分割します。固定したい列は<thead>内に配置します。
2. CSSスタイル
   
   • z-index: 1;：他の要素よりも上に表示し、スクロールしても固定列が隠れないようにします。

HTML コード

<table>
  <thead>
    <tr>
      <th>固定列</th>
      <th>スクロール可能な列</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>データ1</td>
      <td>スクロール可能なデータ1</td>
    </tr>
    <tr>
      <td>データ2</td>
      <td>スクロール可能なデータ2</td>
    </tr>
    </tbody>
</table>

CSS コード

table {
  width: 100%;
  overflow-x: auto;
}

thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
}

コード解説

1. HTML
   

   • <table>: テーブルの開始タグ。
   • <thead>: テーブルヘッダの開始タグ。
   • <th>: ヘッダセルの開始タグ。

2. CSS
   

   • table { width: 100%; overflow-x: auto; }: テーブルの幅を100%に設定し、横方向のスクロールバーを表示します。
   • thead th:first-child { position: sticky; left: 0; z-index: 1; }:

動作

JavaScriptを用いたスクロールイベントの処理

JavaScriptを使用して、テーブルのスクロールイベントを検知し、それに応じて左側の列を固定または非固定することができます。

const table = document.querySelector('table');
const fixedColumn = table.querySelector('thead th:first-child');

table.addEventListener('scroll', () => {
  if (table.scrollLeft > 0) {
    fixedColumn.style.position = 'fixed';
    fixedColumn.style.left = '0';
  } else {
    fixedColumn.style.position = 'static';
    fixedColumn.style.left = '';
  }
});

CSSのposition: stickyとtopプロパティの組み合わせ

position: stickyとtopプロパティを組み合わせることで、スクロール時に要素が画面の特定の位置に固定されるようにすることができます。

table {
  width: 100%;
  overflow-x: auto;
}

thead th:first-child {
  position: sticky;
  top: 0;
  z-index: 1;
}

CSSのposition: absoluteとJavaScriptのスクロールイベントの処理

position: absoluteを使用して要素を絶対配置し、JavaScriptでスクロールイベントを検知して要素の位置を調整することができます。

table {
  width: 100%;
  overflow-x: auto;
}

thead th:first-child {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

const table = document.querySelector('table');
const fixedColumn = table.querySelector('thead th:first-child');

table.addEventListener('scroll', () => {
  fixedColumn.style.left = `${table.scrollLeft}px`;
});

CSSのtransform: translateX()とJavaScriptのスクロールイベントの処理

transform: translateX()を使用して要素を水平方向に移動し、JavaScriptでスクロールイベントを検知して移動量を調整することができます。

table {
  width: 100%;
  overflow-x: auto;
}

thead th:first-child {
  position: sticky;
  top: 0;
  z-index: 1;
}

const table = document.querySelector('table');
const fixedColumn = table.querySelector('thead th:first-child');

table.addEventListener('scroll', () => {
  fixedColumn.style.transform = `translateX(-${table.scrollLeft}px)`;
});