ども、むったんです！

 

久々のHTML & CSSネタです。
本業です！
本業だけど、最近離れすぎてタグやらプロパティやら忘れてて大変😱

 

先日phpにも久々に触ったんですが「あれ、私何作ろうとしてる…？」から始まる事態。
あぁ、悲惨😱

 

 

そんなこんなでちょっと前にTableを組んでいく作業がありましたが、レスポンジブデザインで見せる際に組み換えて縦にする内容…には適さず。
じゃ、横のままで…とすると意図せずに縦読みできたり（笑）
「やっぱり横のままはみ出した分はスクロールで見せるしかないですね」となり作ったものを（自分のメモも兼ねて）ご紹介します！

 

 

横スクロールできるTable

さて、単純に横スクロールできるTableと言っても、横幅がぶち抜けた状態のTableだとただの見栄えの悪いTableです。

 

 

上記の画像の状態だとスマホ等から見たとき、上下スクロールだけではなく左右にもスクロールしてしまう非常に操作しづらいものであります。

 

なので、今回ご紹介するのはTable部分だけ横スクロールできるようにしてみます！
見せ方にこだわれば「あ、右側に続いてるのかな..」とユーザーを誘導できます。

 

 

サンプル

百聞は一見に如かず！
まずはサンプルをご覧ください。

 

See the Pen LYNYMLy by 6zaki (@6zaki) on CodePen.

 

おいおいおい…推しの３曲選べなんて、そんなのできるわけないだろう！
誰だよ！こんな題材選んだの！
私だよ！笑

タイトルだから横に長くなるかなー…って思って。
選曲する時間もかかったよwww（本気）

 

実はむったん、Kinki Kidsが昔から好きでして（声優が好きになる遥か昔から😍）昔のCDも結構持ってるのですが…最近車でお出かけるすときにケリーさん（ENDRECHERI）をかけながらドライブ（と言っても、近所のスーパーww）するのがとてもツボです。
もうね…気分イケイケですwww

 

 

 

 

…脱線してしまった。

 

サンプルを見ていただくと分かる通り、TableがResutl画面より大きければ横スクロールしますね。
ちなみに、タイトルの「むったんの好きな推し曲」はResult画面の真ん中（text-align: center;）に配置しています。

 

 

コード説明

そんなに難しいことはしていません。

 

まず、Tableの外側ですね。

 

 

コンテンツが収まらない場合は、スクロールバーを表示します。
このプロパティが今回のポイントです。

 

あとは列ごとの横幅を整えて（この場合は固定値を想定かな）あげれば完了です。

 

 

実際、先日作った時はPCとタブレットで見る想定時はTable自体の横幅を100%にして画面に収めつつ、スマホなどの小さい端末から見る時は横スクロールできるようにスタイルの調整をしました。

 

 

 

 

 

ふぅ…なんとか形にできて一安心。
ではっ！