table テーブルの表を横スクロールさせる方法

WEB制作 - HTML・CSS
この記事は約 2 分で読めます ( 約 1109 文字 )

テーブル ( table ) の表を横スクロールさせる HTML・CSS の記述をご紹介します。 table は表内の文字が多いと縦長の表になりスペースを取りますのでコンパクトに表示したいときにお試しください。CSS の メディアクエリでレスポンシブ時 ( スマホ等 ) だけに適用させることもできます。

 

table を横スクロールさせるための記述

 

【 1 】次の CSS を追加してください

全デバイスで適用する場合

レスポンシブ時 ( 画面横幅 799 px 以下のスマホ等 ) で適用する場合

 

 

【 2 】table の記述を <div class=”table-scroll”> ~ </div> で囲んでください

 

 

 

表示例

 

次のように PC では table の下に横スクロールバーが表示されます。

※表のデザインは「 カエテングラフ WordPress テーマ 」の場合です

 

重要タグ名 テーマ設定内容
title タイトル
サイトタイトル
h1
  • サイトタイトル
  • ヘッダー内側画像 ( HTML ) を設定したときは画像
h2
  • 個別記事タイトル
  • 記事一覧の個別記事タイトル 個別記事が非表示のとき
  • 記事一覧のサムネイル画像 個別記事・記事一覧の個別記事タイトルが非表示のとき
  • 記事に書いたh2タグ
h3
記事に書いたh3タグ
h4・h5・h6
設定なし
Keywords キーワード
管理ページ [ キーワード ] に入力したもの
Description 説明文
管理ページ [ サイト説明文 ] に入力したもの
robots 検索エンジンクロール
設定なし
2 ページ目以降のタイトル
サイトタイトル – ○ページ目
2 ページ目以降の説明文
サイトタイトル – ○ページ目。サイト説明文。

 

 

 

まとめ

 

表を横スクロールさせるための HTML・CSS は覚えておくと何かと便利です。 次のようなカスタマイズも自由自在にできます。

 

  • PCは横スクロールなしで表全体を表示
  • スマホ等は横スクロールありでコンパクトに表示

 

 

但し、スマホ等では横スクロールバーが表示されず閲覧者が認識できませんので、横スクロールができる旨を表記すると閲覧者に親切です。

 

カエテングラフ WordPress テーマでは「 表示に関するショートコード 」を用意していますので、次のように記述するとスマホ・タブレットだけ説明を表示することができます。