【Cocoonテーマ】レスポンシブテーブル挙動を調整。スマホのみ横スクロールするように。

ブログの記事投稿では、閲覧していただく方に情報がすんなりと読めるように、テーブル・リストなどを多く使うことを心がけています。

ドンちゃん

表現は文章だけじゃないわよ。

私個人としても、スペック的な情報を文章でひたすら書かれたWebメディアを見ても情報が頭に入ってこないです（古いPCメディアに多い印象）。

HTMLを書くのが楽になるエディタを使っているのでHTMLテーブルで投稿すること自体は苦にはしていませんが、表示させる内容で折り返し部分を考えたりとか、PC、タブレット、スマホの見た目が異なる部分には悩みを持っています。

このブログではWordPressのテーマにコクーン(Cocoon)を使っていますが、設定1つでレスポンシブ対応にすることが可能です。

今回は、それに＋αでスマホのみをレスポンシブを対応させたく少しCSSを調整してみました。

〜目次〜

HTMLテーブルのレスポンシブ対応とは
1. WordPressでテーブル作成方法
コクーン(Cocoon)のテーブルレスポンシブ設定方法
スマホのみテーブルレスポンシブを対応させる方法
最後に

HTMLテーブルのレスポンシブ対応とは

要はパソコン、タブレット、スマホなどデバイスを問わずに、HTMLテーブルの内容を読みやすくすることです。

レスポンシブ化してないテーブルはスマホだとちょっと見づらいことも

いまやスマホで情報を閲覧する方のほうが多い時代ですので、横幅不足を解消するアプローチをプロのクリエイターさんなどがいろいろ考えられているようです。

CSSで出来るレスポンシブ対応を考えた table レイアウト | ウェブ戦略・コンサルティング UNIONNET Inc.

CSSで出来るレスポンシブ対応を考えた table レイアウトのページ。 ▼2021年最新版【コピペOK】制作会社が実際に使っている、レスポンシブ対応のtableレイアウトスマホ対応・レスポンシブが当たり前になってきてるこの時代、コーダーさんにとって...

上記の記事を要約すると…

ヘッダーの行と列を入れ替えたりとか、
行の内容からList-itemを作ったりとか、
スクロールさせたり、、、とか大変なんですね

WordPressでテーブル作成方法

次の記事にベーシックな内容をまとめました。

ワードプレスでの表（テーブル）作り方（Cocoonテーマ寄り）

ワードプレスでの表（テーブル）の作り方をご紹介します。基本的なHTML情報をわかりやすく書いてみました。少しCocoonテーマ寄りです。

コクーン(Cocoon)のテーブルレスポンシブ設定方法

コクーンはデフォルトでは、HTMLテーブルの内容を横スクロールさせる設定が備わっています。デフォルトはOFFで使いたい人が自分で設定して使うことが出来ます。

テーブルをレスポンシブ対応の横スクロール方式にする方法

横スクロール表示対応のレスポンスでテーブル設定方法です。

WordPress Cocoonテーマのレスポンシブテーブル設定

WordPress Cocoonテーマのレスポンシブテーブル設定　チェックボックスをONにするだけ

以下は、スマートフォンでテーブルを見た場合。

レスポンシブテーブルスマートフォンの場合

次はPC上でテーブルを見た場合。

レスポンシブ PCの場合

スマホのみテーブルレスポンシブを対応させる方法

コクーンの設定では、すべてのメディアクエリでスクロールさせるレスポンシブ設定となります。

ただ、私は普段のHTMLテーブルで使用している列数を5つ程度に絞っています。PCやタブレットはレスポンシブ設定はオフでもよいかな？と思ったので、珍しくCSSで調整してみます。

普段、PC閲覧の場合は折り返さない列、折り返させる列を意識しています。

デベロッパーツールで見たところ、コクーンのレスポンシブ設定をONにした後にth, tdタグに「white-space: nowrap;”（テキストを折り返さない設定）」が入っていました。これを一旦元の「テキストを折り返す設定」に戻します。

.scrollable-table th, .scrollable-table td {
　　　　/* テキストを折り返す設定 */
　　　　white-space: normal;
}

これでPCの場合は設定前の状態に戻りました。（スクロール設定自体は有効でしょうが、この一文で求めていた結果は得られた）

Cocoon レスポンシブテーブルに追加設定でPCは横スクロールなしに

その後、640px以下で再び「テキストを折り返さない設定」を入れます。

/* 640px以下*/
@media screen and (max-width: 640px) {
　　　　.scrollable-table th, .scrollable-table td {
　　　　　　　　/* テキストを折り返さない設定 */
　　　　　　　　white-space: nowrap;
　　　　}
}

レスポンシブテーブル見出し非固定

ここまででスマホのみ横スクロールする結果が得られました。ただ、使っているうちに見出しが横にあるテーブルが左に流れすぎていったときに、どの見出しを見ていたのか迷子になるような気が…

見出しを固定する手段はないのか…と探したところ、、、おぉあったあった感謝。

CSSのみで行・列ヘッダ固定テーブルを実装（Firefox / Chrome / Safari） - Qiita

Introductionモダンブラウザにおいてposition: stickyとwidth: max-contentの対応が進んだことで、CSSのみで行・列ヘッダ固定テーブルを容易に実装できるよう…

CSSのposition属性を使うと出来るようです。次の設定を加えました。

@media screen and (max-width: 640px) {
 .scrollable-table th {
  /* ヘッダーを固定する設定 */
   position: -webkit-sticky;
   position: sticky;
   left: 0;
   z-index: 1;
 }
}

レスポンシブテーブル見出し固定

うまくいきました。横に設定した見出し(thタグ)が追随してくれます。

一部のブラウザでは動かないようです。IEはダメ、この辺は割り切り。

最終的にCSSに入れた情報は次の通り。

/* Cocoonテーマでレスポンシブ設定の追加CSS --- ここから */
.scrollable-table th, .scrollable-table td {
    /* テキストを折り返す設定 */
    white-space: normal;
}

/* 640px以下*/
@media screen and (max-width: 640px) {
    .scrollable-table th {
        /* ヘッダーを固定する設定 */
        position: -webkit-sticky; 
        position: sticky;
        left: 0;
        z-index: 1; 
    } 
    .scrollable-table th, .scrollable-table td {
        /* テキストを折り返さない設定 */
        white-space: nowrap;
    }
}
/* Cocoonテーマでレスポンシブ設定の追加CSS --- ここまで */

CSSの適用方法は2通り