Webサイトでテーブルを使う時、スマホとPCで最適な表示方法が異なることってありますよね。
今回は、スマホでは横スクロール可能、PCでは画面幅にフィットするレスポンシブなテーブルの実装方法をご紹介します。
Contents
なぜレスポンシブテーブルの実装が必要なのか？
スマホの狭い画面でテーブルを表示すると、列が多い場合に以下の問題が発生します。
- 文字が小さくなりすぎて読めない
- セルの内容が改行されて縦に長くなる
- テーブル全体が見づらくなる
一方、PCでは画面が広いので、テーブルを画面幅いっぱいに表示した方が見やすくなります。
CSSでtable要素をスマホの時だけスクロール
HTML構造
まず、テーブルをコンテナで囲みます。このコンテナがスクロールを制御する役割を担います。
<div class="table-container">
<table>
<thead>
<tr>
<th>商品名</th>
<th>価格</th>
<th>在庫</th>
<th>カテゴリ</th>
<th>評価</th>
</tr>
</thead>
<tbody>
<tr>
<td>商品A</td>
<td>¥1,980</td>
<td>在庫あり</td>
<td>電化製品</td>
<td>★★★★☆</td>
</tr>
<tr>
<td>商品B</td>
<td>¥3,500</td>
<td>残りわずか</td>
<td>家具</td>
<td>★★★★★</td>
</tr>
</tbody>
</table>
</div>CSS実装
/* テーブルコンテナ：スマホでスクロール可能に */
.table-container {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;/* iOSでスムーズスクロール */
margin-bottom: 1.5rem;
}
/* テーブル本体：スマホでは最小幅を確保 */
table {
min-width: 600px;/* 列が潰れないよう最小幅を設定 */
width: 100%;
border-collapse: collapse;
}
/* テーブルのスタイリング */
th, td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #f8f9fa;
font-weight: bold;
}
/* PC・タブレット：768px以上 */
@media screen and (min-width: 768px) {
table {
min-width: auto;/* 最小幅の制限を解除 */
width: 100%;/* 画面幅にフィット */
}
}コードの解説
1. overflow-x: auto
コンテナに横スクロールを追加します。
コンテンツが幅を超える場合のみスクロールバーが表示されます。
2. min-width: 600px
テーブルの最小幅を設定することで、スマホでも列が潰れずに見やすさを保ちます。
この値はテーブルの列数に応じて調整してください。
3. -webkit-overflow-scrolling: touch
iPhoneやiPadでのスクロールを滑らかにします。
これを指定しないとカクカクした動きになることがあります。
4. メディアクエリ
768px（一般的なタブレットサイズ）以上の画面では、min-width: autoにして最小幅の制限を解除します。
これによりテーブルが画面幅にフィットします。
実際に触ってCSSに変更を加えてみよう
実際にコードに変更を加えて挙動の違いを試してください。
See the Pen responsive-table by naoq (@naoq) on CodePen.
応用テクニック
スクロール可能であることを示すヒント
スマホユーザーにテーブルがスクロール可能であることを伝えるため、影や装飾を追加できます。
.table-container {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
/* 右端に影を追加してスクロール可能を示唆 */
background:
linear-gradient(90deg, white 30%, transparent),
linear-gradient(90deg, transparent, white 70%) 100% 0,
radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.2), transparent),
radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.2), transparent) 100% 0;
background-repeat: no-repeat;
background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
background-attachment: local, local, scroll, scroll;
}ブレイクポイントのカスタマイズ
プロジェクトに応じてブレイクポイントを調整できます。
/* スマホ専用 */
@media screen and (max-width: 767px) {
table {
min-width: 600px;
font-size: 14px;/* 文字サイズを少し小さく */
}
}
/* タブレット */
@media screen and (min-width: 768px) and (max-width: 1023px) {
table {
min-width: auto;
font-size: 15px;
}
}
/* PC */
@media screen and (min-width: 1024px) {
table {
min-width: auto;
font-size: 16px;
}
}WordPressに実装方法
方法は２つあります。
方法1）テーマのCSSファイルに追加（推奨）
- WordPress管理画面から「外観」→「テーマファイルエディター」を開く
- 右側のファイル一覧から「style.css」を選択
- ファイルの最後に以下のCSSを追加
方法2）カスタムCSSを使用
- WordPress管理画面から「外観」→「カスタマイズ」を開く
- 「追加CSS」をクリック
- 上記と同じCSSコードを貼り付け
- 「公開」ボタンをクリック
方法3）プラグインを使用
CSSを管理しやすくしたい場合は、プラグインを使用します。
おすすめプラグイン：
- Simple Custom CSS and JS – CSSとJSを簡単に追加
- WP Add Custom CSS – シンプルなCSS追加プラグイン
方法4）独自のcssファイルを読むこむ
まとめ：CSSでテーブルをスマホなら横スクロール、PCで画面フィット！
レスポンシブテーブルの実装ポイント
- テーブルを
divで囲み、overflow-x: autoを指定 - スマホでは
min-widthで最小幅を確保 - PCではメディアクエリで
min-width: autoに切り替え - iOSのスクロールを滑らかにする
-webkit-overflow-scrolling: touchを忘れずに
この方法を使えば、どんなデバイスでも快適にテーブルを閲覧できるようになります。
ぜひ試してみてください！
