MENU

【CSS】tableの列（行）をスクロール時に固定する方法

広告
CSS
  • URLをコピーしました！

こんにちは。すずきです。

この記事ではtableのスクロール時に列や行を固定する方法について解説します。

このような人にオススメ
  • テーブルのヘッダーを画面上部に固定したい
  • テーブルの行をスクロール時に固定したい
目次

列を固定したテーブルの実装方法

まずは列を固定したテーブルの実装方法を解説します。

HTMLを記述

まずはHTMLを記述します。
スクロール可能にするため、<table>タグを<div>タグで囲みます。
また、スクロールしたいセルには.fixed-columnのクラスを付与しています。

<div class="table__container">
  <table>
    <tr>
      <th class="fixed-column">タイトル1</th>
      <td>テキスト1</td>
      <td>テキスト2</td>
      <td>テキスト3</td>
      <td>テキスト4</td>
      <td>テキスト5</td>
      <td>テキスト6</td>
      <td>テキスト7</td>
      <td>テキスト8</td>
      <td>テキスト9</td>
      <td>テキスト10</td>
    </tr>
    <tr>
      <th class="fixed-column">タイトル1</th>
      <td>テキスト1</td>
      <td>テキスト2</td>
      <td>テキスト3</td>
      <td>テキスト4</td>
      <td>テキスト5</td>
      <td>テキスト6</td>
      <td>テキスト7</td>
      <td>テキスト8</td>
      <td>テキスト9</td>
      <td>テキスト10</td>
    </tr>
    <tr>
      <th class="fixed-column">タイトル1</th>
      <td>テキスト1</td>
      <td>テキスト2</td>
      <td>テキスト3</td>
      <td>テキスト4</td>
      <td>テキスト5</td>
      <td>テキスト6</td>
      <td>テキスト7</td>
      <td>テキスト8</td>
      <td>テキスト9</td>
      <td>テキスト10</td>
    </tr>
  </table>
</div>

CSSを記述

tableをスクロール可能にする

<table>を横スクロール可能にするため、囲った<div>に以下の指定をします。

.table__container {
  width: 100%;
  overflow-x: scroll;
}

また、tableにも基本的なデザインの指定をしておきます。
スクロールできるようwidth: 200%;を指定していますが、ここは適宜調整してください。

table {
  width: 200%;
  border-collapse: collapse;
}
th,
td {
  border: solid 1px lightgray;
  padding: 1rem 1rem;
}

これで基本的なデザインと、スクロール処理までは完了しました。

position: stickyを記述する

次にスクロール時に固定したいセルの指定をします。
.fixed-columnに以下の指定をすることで、スクロール時も固定することができます。

.fixed-column {
  position: sticky;
  left: 0;
}

これでスクロール時も固定はされますが、後ろのセルが透けたり、枠線が消えたりと
デザイン崩れが起きてしまうのでその部分を調整します。

枠線、背景色を指定する

後ろのセルが透けてしまうので、background-colorを指定します。
また、枠線は一緒にスクロールされてしまうので、::beforeの擬似要素を使用し、borderを指定します。

.fixed-column {
  background-color: white;
}
.fixed-column::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-left: solid 1px lightgrey;
  border-right: solid 1px lightgrey;
}

上記コードで実装した完成品がこちらになります。

See the Pen テーブル端固定レスポンシブ by すずき (@k-suzuki3533) on CodePen.

行を固定したテーブルの実装方法

次は行を固定したテーブルの作成方法です。
とはいえ、基本的な考え方は先ほどの列を固定したテーブルの実装方法と同じです。

HTMLを記述

スクロール動作のため<table>タグを<div>タグで囲っています。
今回スクロールしたいセルには.fixed-rowのクラスを付与しています。

<div class="table__container">
  <table>
    <thead>
      <tr>
        <th class="fixed-row">タイトル1</th>
        <th class="fixed-row">タイトル2</th>
        <th class="fixed-row">タイトル3</th>
        <th class="fixed-row">タイトル4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>テキスト1</td>
        <td>テキスト2</td>
        <td>テキスト3</td>
        <td>テキスト4</td>
      </tr>
      <tr>
        <td>テキスト1</td>
        <td>テキスト2</td>
        <td>テキスト3</td>
        <td>テキスト4</td>
      </tr>
      <tr>
        <td>テキスト1</td>
        <td>テキスト2</td>
        <td>テキスト3</td>
        <td>テキスト4</td>
      </tr>
      <tr>
        <td>テキスト1</td>
        <td>テキスト2</td>
        <td>テキスト3</td>
        <td>テキスト4</td>
      </tr>
      <tr>
        <td>テキスト1</td>
        <td>テキスト2</td>
        <td>テキスト3</td>
        <td>テキスト4</td>
      </tr>
      <tr>
        <td>テキスト1</td>
        <td>テキスト2</td>
        <td>テキスト3</td>
        <td>テキスト4</td>
      </tr>
      <tr>
        <td>テキスト1</td>
        <td>テキスト2</td>
        <td>テキスト3</td>
        <td>テキスト4</td>
      </tr>
      <tr>
        <td>テキスト1</td>
        <td>テキスト2</td>
        <td>テキスト3</td>
        <td>テキスト4</td>
      </tr>
      <tr>
        <td>テキスト1</td>
        <td>テキスト2</td>
        <td>テキスト3</td>
        <td>テキスト4</td>
      </tr>
      <tr>
        <td>テキスト1</td>
        <td>テキスト2</td>
        <td>テキスト3</td>
        <td>テキスト4</td>
      </tr>
    </tbody>
  </table>
</div>

CSSを記述

今回は縦スクロールになりますので、スクロールのための指定を変えます。

.table__container {
  width: 100%;
  height: 300px;
  overflow-y: scroll;
}

固定セルの位置と枠線もそれぞれ位置関係を考慮して記述します。

.fixed-row {
  position: sticky;
  top: 0;
  background-color: white;
}
.fixed-row::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-top: solid 1px lightgrey;
  border-bottom: solid 1px lightgrey;
}

実際に作成したものがこちらになります。

See the Pen テーブルのスクロール時に行を固定する by すずき (@k-suzuki3533) on CodePen.

列と行を固定したテーブルの実装方法

最後に列も行も固定したテーブルの実装です。

HTMLを記述

同じ要領でHTMLを記述していきます。

<div class="table__container">
  <table>
    <thead>
      <tr>
        <th class="fixed-row"></th>
        <th class="fixed-row">タイトル1</th>
        <th class="fixed-row">タイトル2</th>
        <th class="fixed-row">タイトル3</th>
        <th class="fixed-row">タイトル4</th>
        <th class="fixed-row">タイトル5</th>
        <th class="fixed-row">タイトル6</th>
        <th class="fixed-row">タイトル7</th>
        <th class="fixed-row">タイトル8</th>
        <th class="fixed-row">タイトル9</th>
        <th class="fixed-row">タイトル10</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th class="fixed-column">タイトル1</th>
        <td>テキスト1</td>
        <td>テキスト2</td>
        <td>テキスト3</td>
        <td>テキスト4</td>
        <td>テキスト5</td>
        <td>テキスト6</td>
        <td>テキスト7</td>
        <td>テキスト8</td>
        <td>テキスト9</td>
        <td>テキスト10</td>
      </tr>
      <tr>
        <th class="fixed-column">タイトル1</th>
        <td>テキスト1</td>
        <td>テキスト2</td>
        <td>テキスト3</td>
        <td>テキスト4</td>
        <td>テキスト5</td>
        <td>テキスト6</td>
        <td>テキスト7</td>
        <td>テキスト8</td>
        <td>テキスト9</td>
        <td>テキスト10</td>
      </tr>
      <tr>
        <th class="fixed-column">タイトル1</th>
        <td>テキスト1</td>
        <td>テキスト2</td>
        <td>テキスト3</td>
        <td>テキスト4</td>
        <td>テキスト5</td>
        <td>テキスト6</td>
        <td>テキスト7</td>
        <td>テキスト8</td>
        <td>テキスト9</td>
        <td>テキスト10</td>
      </tr>
      <tr>
        <th class="fixed-column">タイトル1</th>
        <td>テキスト1</td>
        <td>テキスト2</td>
        <td>テキスト3</td>
        <td>テキスト4</td>
        <td>テキスト5</td>
        <td>テキスト6</td>
        <td>テキスト7</td>
        <td>テキスト8</td>
        <td>テキスト9</td>
        <td>テキスト10</td>
      </tr>
      <tr>
        <th class="fixed-column">タイトル1</th>
        <td>テキスト1</td>
        <td>テキスト2</td>
        <td>テキスト3</td>
        <td>テキスト4</td>
        <td>テキスト5</td>
        <td>テキスト6</td>
        <td>テキスト7</td>
        <td>テキスト8</td>
        <td>テキスト9</td>
        <td>テキスト10</td>
      </tr>
      <tr>
        <th class="fixed-column">タイトル1</th>
        <td>テキスト1</td>
        <td>テキスト2</td>
        <td>テキスト3</td>
        <td>テキスト4</td>
        <td>テキスト5</td>
        <td>テキスト6</td>
        <td>テキスト7</td>
        <td>テキスト8</td>
        <td>テキスト9</td>
        <td>テキスト10</td>
      </tr>
      <tr>
        <th class="fixed-column">タイトル1</th>
        <td>テキスト1</td>
        <td>テキスト2</td>
        <td>テキスト3</td>
        <td>テキスト4</td>
        <td>テキスト5</td>
        <td>テキスト6</td>
        <td>テキスト7</td>
        <td>テキスト8</td>
        <td>テキスト9</td>
        <td>テキスト10</td>
      </tr>
      <tr>
        <th class="fixed-column">タイトル1</th>
        <td>テキスト1</td>
        <td>テキスト2</td>
        <td>テキスト3</td>
        <td>テキスト4</td>
        <td>テキスト5</td>
        <td>テキスト6</td>
        <td>テキスト7</td>
        <td>テキスト8</td>
        <td>テキスト9</td>
        <td>テキスト10</td>
      </tr>
      <tr>
        <th class="fixed-column">タイトル1</th>
        <td>テキスト1</td>
        <td>テキスト2</td>
        <td>テキスト3</td>
        <td>テキスト4</td>
        <td>テキスト5</td>
        <td>テキスト6</td>
        <td>テキスト7</td>
        <td>テキスト8</td>
        <td>テキスト9</td>
        <td>テキスト10</td>
      </tr>
      <tr>
        <th class="fixed-column">タイトル1</th>
        <td>テキスト1</td>
        <td>テキスト2</td>
        <td>テキスト3</td>
        <td>テキスト4</td>
        <td>テキスト5</td>
        <td>テキスト6</td>
        <td>テキスト7</td>
        <td>テキスト8</td>
        <td>テキスト9</td>
        <td>テキスト10</td>
      </tr>
    </tbody>
  </table>
</div>

CSSを記述

CSSも先ほどの内容をそのまま記述するだけで実装可能です。
ただ、行と列が固定されているので、重なり順を指定する必要があります。

z-indexを指定する

行と列、どちらを上にするか、z-indexで指定します。
今回は列が上に来るよう指定しました。

.fixed-column {
  z-index: 1;
}
.fixed-row {
  z-index: 2;
}

実際に制作したものがこちらになります。

See the Pen テーブルのスクロール時に行と列を固定する by すずき (@k-suzuki3533) on CodePen.

終わりに

tableのスクロール時に列や行を固定する方法について紹介しました。

実装のポイントは以下の通りです。

  • <table>を<div>で囲み、スクロール可能にする
  • 固定したいセルにposition: sticky;を指定し、位置を調整する
  • 背景色や枠線など、見た目の調整をする

固定セルがあることで、特にスマホユーザーに見やすいテーブルが作れるかと思います。

スクロールする場合、スクロールできることを表示することでさらに使いやすいサイトを作成することができるかと思います。
こちらの記事で実装方法を解説しています。

あわせて読みたい
【ScrollHint】要素がスクロール可能な時にヒントを表示するプラグインと使い方を紹介します！ こんにちは。すずきです。 この記事ではスクロール可能な要素にヒントを表示するプラグイン「ScrollHint」について解説します。 このような人にオススメ 横スクロールで…

ぜひ試してみてください。

Web制作に使えるおすすめの書籍

私が実際に購入して役に立った書籍を紹介します。
気になる本があればぜひ読んでみてください！

CSS
  • URLをコピーしました！
目次