ブログカスタマイズ

ブログで表テーブルを横スクロールさせてスマホ対応

ブログで表を貼り付けるには googleドライブのスプレッドシートを起動して表を作成したら選択部分のみコピペで完成。。 いたって簡単なんだけど、スマホでみると、レスポンシブデザインのテンプレートでもテーブルは右にはみ出た部分は見切られてしまうんだな

スマホを横向きにするとすべて表示される幅でスプレッドシート側で作成したが、スマホを縦型にすると、こんな感じで横スクロールもしないので、このような状態では未完成のテーブルといったもんだな。

さーて、レスポンシブテーブルにしても栽培暦12か月分のセルはiPhone6の幅には収まりきれないんだね。

ということで、スクロールして長ーいテーブルは見やすくしてみよう
こちらの記事を参考にさせていただきました。

スマートフォン表示で、はみ出したtableをスクロールさせるCSS 『table要素をスマートフォン画面の幅に合わせる時に使うCSS』では、Webサイト・ブログをスマートフォン表示したときに、tableが画面からはみ出してしまう問題の解決方法として、画面の幅に合わせるためのCSSを紹介しました。 今回は、はみ出したtableを横スクロールさせるためのCSSを紹介します。 はみ出

bloggerのテンプレートカスタマイズ欄のCSSの追記の箇所に上記のcssを書いて保存。
投稿記事のtableタグを

<div class="scroll">

～
　　　　　　　　　～

</div>

で囲むんだな。 すると、こんな横スクロールが表示されて無事スマホ縦型でも表テーブルがレイアウトを保持したまま表示してくれます