テーブルの横スクロール（スクロールヒントつき）の実装方法【スマホに最適】

著者:牧野健人

本記事では横スクロールできるテーブルの実装方法を解説します。

ただ単に横スクロールできるだけではなく、下のデモのように「横にスクロールできます」と伝えるヒントウィンドウもアニメーション付きで表示されるため、利便性が高いです。

商品ID 商品名 価格 在庫数 カテゴリ
1 商品A ¥1,000 10 家電
2 商品B ¥2,000 5 家具
3 商品C ¥500 20 文具

コードはコピペOKなので、ご活用ください。

牧野健人

記事の著者牧野健人

株式会社リラクス 代表取締役。CRO・SEOを専門とし、デザイン・実装のスキルも活かしながら、クライアントの成果向上のための取組に尽力。
慶應義塾大学卒業後、行政機関を経て、デジタルマーケティングエージェンシーのアイレップにて運用型広告のクリエイティブプランニングに従事。2019年にリラクスを創業。

お問い合わせはフォームよりお願いいたします。

横スクロールできるテーブルの実装方法

本記事で紹介する横スクロールテーブルの仕様は下記の通りになります。

以下でHTML、CSS、JavaScriptのコードを紹介します。

HTML

テーブルを囲うコンテナをdivで記述します。テーブルの横幅がこのコンテナよりも大きくなる場合（つまりテーブル幅がコンテンツ幅よりも大きくなり、横スクロールが有効になる場合）にスクロールヒントが表示されます。

<div class="table-container">
  <table class="table">
    <thead class="table__head">
      <tr class="table__row">
        <th class="table__header">商品ID</th>
        <th class="table__header">商品名</th>
        <th class="table__header">価格</th>
        <th class="table__header">在庫数</th>
        <th class="table__header">カテゴリ</th>
      </tr>
    </thead>
    <tbody class="table__body">
      <tr class="table__row">
        <td class="table__cell">1</td>
        <td class="table__cell">商品A</td>
        <td class="table__cell">¥1,000</td>
        <td class="table__cell">10</td>
        <td class="table__cell">家電</td>
      </tr>
      <tr class="table__row">
        <td class="table__cell">2</td>
        <td class="table__cell">商品B</td>
        <td class="table__cell">¥2,000</td>
        <td class="table__cell">5</td>
        <td class="table__cell">家具</td>
      </tr>
      <tr class="table__row">
        <td class="table__cell">3</td>
        <td class="table__cell">商品C</td>
        <td class="table__cell">¥500</td>
        <td class="table__cell">20</td>
        <td class="table__cell">文具</td>
      </tr>
    </tbody>
  </table>
</div>

CSS

スクロールヒントの非表示・非表示をコントロールするCSSを書いておき、後述のJavaScriptでクラスの付け外しをすることで挙動を実装します。

スクロールヒントのアニメーションもCSS（keyframes）で指定しています。

.table-container {
  position: relative;
  overflow-x: auto;
  white-space: nowrap;
}

.table {
  border-collapse: collapse;
}

.table__header {
  color: #fff; /* 文字色は任意のものに変更してください */
  font-weight: 700;
  background: #095DAD; /* 背景色は任意のものに変更してください */
}

.scroll-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-weight: 700;
  line-height: 1.4;
  display: none;
  animation: scroll-hint-animation 2s infinite ease;
}

@keyframes scroll-hint-animation {
  0% {
    transform: translate(-50%, -50%);
  }
  50% {
    transform: translate(-40%, -50%);
  }
  100% {
    transform: translate(-50%, -50%);
  }
}

.scroll-hint--show {
  display: block;
}

JavaScript

HTML要素の幅を表すscrollWidthと、要素の内部の幅を表すclientWidthを比較することで、「テーブルを囲うコンテナよりも、（その内部要素である）テーブルの幅の方が大きいかどうか」という条件分岐を設定しています。

その条件が真である場合に、スクロールヒントを表示するためのクラス（scroll-hint--show）を付与し、偽の場合にそのクラスを外しています。

また、実際にユーザーがスクロールしたらヒントは不要ですので、テーブルのコンテナのscrollイベントを監視しヒントを非表示にできるようにしています。

document.addEventListener('DOMContentLoaded', () => {
  const tableContainers = document.querySelectorAll('.table-container');

  for (const tableContainer of tableContainers) {
    const scrollHint = document.createElement('div');
    scrollHint.className = 'scroll-hint scroll-hint--show';
    scrollHint.innerText = '横にスクロールできます';
    tableContainer.appendChild(scrollHint);

    const showScrollHint = () => {
      if (tableContainer.scrollWidth > tableContainer.clientWidth) {
        scrollHint.classList.add('scroll-hint--show');
      } else {
        scrollHint.classList.remove('scroll-hint--show');
      }
    };
    showScrollHint();

    tableContainer.addEventListener('scroll', () => {
      scrollHint.classList.remove('scroll-hint--show');
    });
  }
});

完成形

記事の冒頭でも示しましたが、テーブルの完成形を改めて掲載します。

商品ID 商品名 価格 在庫数 カテゴリ
1 商品A ¥1,000 10 家電
2 商品B ¥2,000 5 家具
3 商品C ¥500 20 文具

特に画面幅が狭いスマホでは重要なUIになるので、ぜひご活用ください。

WebサイトのCV数を増やしたいなら無料相談 / お問い合わせ