テーブル ( table ) の表を横スクロールさせる HTML・CSS の記述をご紹介します。 table は表内の文字が多いと縦長の表になりスペースを取りますのでコンパクトに表示したいときにお試しください。CSS の メディアクエリでレスポンシブ時 ( スマホ等 ) だけに適用させることもできます。
table を横スクロールさせるための記述
【 1 】次の CSS を追加してください
全デバイスで適用する場合
|
1 |
.table-scroll{overflow:auto;white-space:nowrap;-webkit-overflow-scrolling:touch} |
レスポンシブ時 ( 画面横幅 799 px 以下のスマホ等 ) で適用する場合
|
1 2 3 |
@media screen and (max-width:799px){ .table-scroll{overflow:auto;white-space:nowrap;-webkit-overflow-scrolling:touch} } |
【 2 】table の記述を <div class="table-scroll"> ～ </div> で囲んでください
|
1 2 3 |
<div class="table-scroll"> table の記述 </div> |
表示例
次のように PC では table の下に横スクロールバーが表示されます。
※表のデザインは「 カエテングラフ WordPress テーマ 」の場合です
| 重要タグ名 | テーマ設定内容 |
|---|---|
| title タイトル |
サイトタイトル
|
| h1 |
|
| h2 |
|
| h3 |
記事に書いたh3タグ
|
| h4・h5・h6 |
設定なし
|
| Keywords キーワード |
管理ページ [ キーワード ] に入力したもの
|
| Description 説明文 |
管理ページ [ サイト説明文 ] に入力したもの
|
| robots 検索エンジンクロール |
設定なし
|
| 2 ページ目以降のタイトル |
サイトタイトル - ○ページ目
|
| 2 ページ目以降の説明文 |
サイトタイトル - ○ページ目。サイト説明文。
|
まとめ
表を横スクロールさせるための HTML・CSS は覚えておくと何かと便利です。 次のようなカスタマイズも自由自在にできます。
- PCは横スクロールなしで表全体を表示
- スマホ等は横スクロールありでコンパクトに表示
但し、スマホ等では横スクロールバーが表示されず閲覧者が認識できませんので、横スクロールができる旨を表記すると閲覧者に親切です。
カエテングラフ WordPress テーマでは「 表示に関するショートコード 」を用意していますので、次のように記述するとスマホ・タブレットだけ説明を表示することができます。
|
1 |
[sp2]<p>※ 表は横スクロールできます</p>[/sp2] |
