# テーブルで横スクロール可能にするのCSS実装

> 画面幅が狭い時にテーブル全体を横スクロールできるようにするテクニックです。レスポンシブ対応やデータ量の多い表で便利です。

- カテゴリ: 表示・フィードバック
- URL: https://www.css-dictionary.com/recipes/scrollable-table/

## HTML

```html
<div class="table-scroll-wrapper" tabindex="0" role="region" aria-label="顧客一覧の表">
  <table class="scrollable-table">
    <thead>
      <tr>
        <th>名前</th>
        <th>メールアドレス</th>
        <th>電話番号</th>
        <th>住所</th>
        <th>備考</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>山田 太郎</td>
        <td>taro@example.com</td>
        <td>090-1234-5678</td>
        <td>東京都新宿区1-2-3</td>
        <td>VIP顧客</td>
      </tr>
      <tr>
        <td>佐藤 花子</td>
        <td>hanako@example.com</td>
        <td>080-9876-5432</td>
        <td>大阪市北区4-5-6</td>
        <td>新規</td>
      </tr>
      <tr>
        <td>鈴木 一郎</td>
        <td>ichiro@example.com</td>
        <td>070-1111-2222</td>
        <td>名古屋市中区7-8-9</td>
        <td>リピーター</td>
      </tr>
    </tbody>
  </table>
</div>
```

## CSS

```css
.table-scroll-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: linear-gradient(90deg, #f3ecd9 80%, transparent);
  border-radius: 0.5rem;
}

.scrollable-table {
  min-width: 600px;
  border-collapse: collapse;
  width: 100%;
  background: white;
}

.scrollable-table th,
.scrollable-table td {
  padding: 0.75rem 1.25rem;
  border: 1px solid #e2d8c2;
  text-align: left;
  white-space: nowrap;
}

.scrollable-table th {
  background: #f3ecd9;
  font-weight: 700;
  color: #5c5445;
}

.scrollable-table tr:nth-child(even) {
  background: #faf6ea;
}

/* スクロールバーのカスタマイズ（任意） */
.table-scroll-wrapper::-webkit-scrollbar {
  height: 8px;
}
.table-scroll-wrapper::-webkit-scrollbar-thumb {
  background: #cbbfa5;
  border-radius: 4px;
}
```

## 仕組みの解説

テーブル自体は縮めず、ラッパー要素に overflow-x: auto を指定して「テーブルは本来の幅のまま、狭い画面でははみ出た分をスクロール」させる構成です。テーブル側の min-width が「これ以上は縮まない」基準になり、white-space: nowrap でセル内の不自然な折り返しを防ぎます。ラッパーに tabindex="0" と role="region" を付けると、キーボードでもスクロール操作ができます。

## 実装のポイント

親要素にoverflow-x: auto;を指定し、テーブルにmin-widthを設定するのがポイント。スクロールできることが伝わるよう、端をグラデーションでぼかす等の視覚ヒントも有効です。

## AIに依頼するときの文例

狭い画面で横スクロールできるレスポンシブなテーブルを作ってください。ラッパーにoverflow-x: autoとtabindex="0"、テーブルにmin-widthとwhite-space: nowrapを指定してください。

## 使っているプロパティ

- [overflow](https://www.css-dictionary.com/property/overflow.md)
- [min-width](https://www.css-dictionary.com/property/min-width.md)
- [white-space](https://www.css-dictionary.com/property/white-space.md)
- [border-radius](https://www.css-dictionary.com/property/border-radius.md)