Xeoryのレスポンシブ「テーブル(TABLE、表)」を固定表示にする方法【バズ部のテーマ】

       

どうもテツです。

今回はバズ部の「XEORY BASE 」「XEORY EXTENSION 」で「テーブル(TABLE、表) 」をパソコンではなくスマホなどのレスポンシブ表示した際にスクロールではなく固定表示に切り替える方法を書きます。

バズ部のテーマであるXEORYはテーマとしては優秀で僕も使っているのですが
「テーブル」を使ってみるとレスポンシブ設定が自動的にスクロールになってしまい
スマホで表示したときに見づらく感じた人は僕だけじゃないはずです。

CSS変更前と変更後比較


この3行のテーブルは「イギリスとアメリカの英語の違いは?(発音、単語、理由など)」の記事で作ったものですが、
CSSを変更しない場合は画像のようにスマホ表示にすると横に広がってしまいます。
タッチでスクロールはできるものの初めて来た人からすれば一見崩れていてかなり見づらいです。


変更後はこのように文章で横幅が出ても一画面に収まるようになります。

実際の変更箇所は?

ネットで調べてみると過去にYahoo知恵袋や他のブロガーの記事で取り上げられていました。
ただ具体的な解決策が載っていなかったので紹介したいと思います。

僕はHTMLの知識がないのでいつも他の方の記事などを参考に修正しているのですが
ネット解決策を探そうと約4時間もネットサーフィンして探したのですが見つからず
テーマを変えてしまおうと思ったぐらい悩んでしまいました(笑)

そんな時にとあるページにCSSの「overflow-x」「whitescape」の項目が関係していると書いてあり
直してみると4時間悩んだのが嘘のようにあっさり解決しました。


変更前のCSS

overflow-x「auto」→「visible」
whitescape「nowrap」→「normal」
このように画像のCSS上の赤枠の部分を変更します。

変更後のCSS

この2つを上記画像のように初期値に変更したところ無事固定表示にできました。
上のソースコードはコピペできるので良かったら使ってください。

この細かい違いについては僕もまだまだHTMLを勉強中の身なので
HTMLクイックリファレンス」を参考にしてみてください。

まとめ

以上が「Xeoryのレスポンシブ「テーブル(TABLE、表)」を固定表示にする方法【バズ部のテーマ】」でした。

ちなみに僕が使っているのは元々ワードプレスに付いているテーブルではなく、
「Table Press」というプラグインを使ってます。

それではSee you!

SNSでシェア
 

スポンサーリンク

 
         

THE AWESOME WORLD BLOG【オサブロ】を今後もよろしくお願いします!

ツイッターインスタグラムなど各種SNSやってるよ!

現在LINE@、google+、FACEBOOKページも準備中。

カナダのことだけに関わらずオーストラリア日本文化アフィリエイトなどの記事も上げてく予定なのでよろしく。

よかったらシェアはこの下のSNSアイコンから、

フォローは右上からしてね。

SNSでシェア

他の記事も見ていく!

コメントを残す

*

Translate »