スマホでテーブルを横スクロールさせる方法｜ヒント表示付き実装をデモで解説

<!-- 横スクロールの外枠：スマホ時にoverflow-x: autoを適用 -->
<div class="scroll-table">

  <!-- テーブルとヒントをまとめる内枠：スマホ時に固定幅を持たせる -->
  <div class="scroll-table-inner">

    <!-- テーブル本体 -->
    <div class="scroll-table-body">
      <table>
        <colgroup>
          <col style="width: 15%;">
          <col style="width: 50%;">
          <col style="width: 20%;">
          <col style="width: 15%;">
        </colgroup>
        <thead>
          <tr>
            <th>店舗名</th>
            <th>住所</th>
            <th>営業時間</th>
            <th>定休日</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>渋谷店</td>
            <td>東京都渋谷区渋谷1-2-3　エムズビル2F</td>
            <td>10:00〜21:00</td>
            <td>火曜日</td>
          </tr>
          <tr>
            <td>新宿店</td>
            <td>東京都新宿区新宿4-5-6　サンライズビル1F</td>
            <td>11:00〜22:00</td>
            <td>水曜日</td>
          </tr>
          <!-- 以下、同様の構造が続きます -->
        </tbody>
      </table>
    </div>

    <!-- 横スクロールを促すヒント：JavaScriptでスクロール後に非表示になる -->
    <div class="scroll-hint">
      <div class="scroll-hint-icon"><img src="images/icon_scroll.webp" alt=""></div>
      <p class="scroll-hint-text">横スクロール<br>できます</p>
    </div>
  </div>
</div>

/* =====================
   横スクロール：外枠
   ===================== */

@media (max-width: 767px) {
  .scroll-table {
    position: relative; /* ヒントを中央に絶対配置するための基準 */
    margin: 0 -20px; /* 親要素のpaddingを打ち消してコンテンツ幅いっぱいに広げる */
    overflow-x: auto; /* スマホ時に横スクロールを有効にする */
  }
}

/* =====================
   横スクロール：内枠
   ===================== */

@media (max-width: 767px) {
  .scroll-table-inner {
    width: 1100px; /* スクロール領域の幅（コンテンツ幅に合わせて変更） */
    padding: 0 20px; /* 外枠で打ち消した分のpaddingを戻す */
  }
}

/* =====================
   テーブル本体
   ===================== */

.scroll-table-body table {
  width: 100%;
  table-layout: fixed; /* colgroup で指定した列幅を優先させる */
  border-spacing: 0;
  border-collapse: separate;
  background: #fff;
  font-size: 16px;
}

.scroll-table-body table th,
.scroll-table-body table td {
  padding: 15px 20px;
  line-height: 1.7;
  text-align: left;
}

.scroll-table-body table th:nth-child(n+2),
.scroll-table-body table td:nth-child(n+2) {
  border-left: 1px solid #e9edf2;
}

.scroll-table-body table th {
  background: #192753;
  color: #fff;
}

.scroll-table-body table tr:nth-child(n+2) th,
.scroll-table-body table tr:nth-child(n+2) td {
  border-top: 1px solid #e9edf2;
}

/* =====================
   横スクロールのヒント
   ===================== */

.scroll-hint {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100px;
  height: 100px;
  box-sizing: border-box;
  border-radius: 5px;
  background: rgba(0, 0, 0, .8);
  transform: translate(-50%, -50%); /* 上下左右中央に配置 */
  transition: visibility 0ms 300ms, opacity 300ms; /* 非表示はopacityでフェードさせ、visibilityは遅延させる */
  pointer-events: none; /* ヒントがクリックの邪魔にならないようにする */
}

/* PC時はヒントを非表示 */
@media (min-width: 768px) {
  .scroll-hint {
    display: none;
  }
}

.scroll-hint-icon {
  position: relative;
  width: 48px;
  margin: 0 auto;
  aspect-ratio: 162/139;
}

.scroll-hint-icon img {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.scroll-hint-text {
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

/* スクロール後にヒントをフェードアウトして非表示にする */
.scroll-table.is-scrolled .scroll-hint {
  visibility: hidden;
  opacity: 0;
}

const scroll_table = (() => {
  // 各種設定値をまとめるオブジェクト
  const props = {
    resizeDelay: 300, // リサイズ後に再判定するまでの待機時間（ms）
    resizeTimeout: null // setTimeout を保持しておくための変数
  };

  function init() {
    // ページ内の .scroll-table をすべて取得（複数設置にも対応）
    const scrollTables = document.querySelectorAll('.scroll-table');
    if (!scrollTables.length) return; // 該当要素がなければ処理しない

    // 初期表示時にスクロール状態を判定
    scrollTables.forEach((el) => {
      scrollCheck(el);
    });

    // 画面リサイズ時にも再判定（向き変更などに対応）
    window.addEventListener('resize', () => {
      clearTimeout(props.resizeTimeout);

      // 連続発火を防ぐためにディレイをかける（簡易デバウンス）
      props.resizeTimeout = setTimeout(() => {
        scrollTables.forEach((el) => {
          scrollCheck(el);
        });
      }, props.resizeDelay);
    });

    // 実際に横スクロールされたときの判定
    scrollTables.forEach((el) => {
      el.addEventListener('scroll', (e) => {
        scrollCheck(e.currentTarget);
      });
    });
  }
  
  /**
   * スクロール状態を判定し、
   * ヒントを非表示にするためのクラス（is-scrolled）を付与する
   */
  function scrollCheck(scroll) {
    // display:none などで非表示の場合は処理しない
    // PC幅ではヒント自体が非表示なので判定不要
    const isHidden = scroll.offsetParent === null;
    if (isHidden || window.matchMedia('(min-width: 768px)').matches) return;

    let scrolledFlag = false;

    // 外枠（スクロール領域）の幅
    const scrollW = scroll.getBoundingClientRect().width;

    // 内側コンテンツの幅（固定幅）
    const scrollInner = scroll.querySelector('.scroll-table-inner');
    const scrollInW = scrollInner.getBoundingClientRect().width;

    // ① そもそも横スクロールが不要な場合（内側が収まっている）
    if (scrollW >= scrollInW) { scrolledFlag = true; }

    // 現在のスクロール位置
    const scrL = scroll.scrollLeft;

    // ② 少しでも右にスクロールされたらヒントを消す
    if (scrL > 10) { scrolledFlag = true; }

    // ③ 一番右端までスクロール済みの場合もヒント不要
    if (scrL >= scrollInW - scrollW) { scrolledFlag = true; }

    // 条件を満たしたらクラスを付与（CSSでフェードアウト）
    if (scrolledFlag) {
      scroll.classList.add('is-scrolled');
    }
  }
  
  return {
    init: init
  };
})();

// 初期化実行
scroll_table.init();