インフラエンジニアを募集中です。詳細はこちら横スクロールさせたいtableの幅がうまくいかない...を解消しようHTML&CSSyanagimachi2018.04.03花粉症が今年はクッソ辛いyanagimachiです。「スギ花粉症の根本治癒を目的とした次世代型ワクチン」が臨床試験に入るニュースを見たので、実用化されたらとりあえずスギの花粉症だけでも早めにどうにかしたいところです。先日PCでtableが横スクロールする案件がありました。いえ、サイトの幅が広いとかモジュール化によって中身が足りないtableだってあるわけで、そういう時はなんかうまく幅の指定が動かない時があります。今までスマホの時は幅が狭かったり、中身が多かったりで大丈夫だったのに、PCだとうまくいかない時のTIPをご紹介します。HTMLは以下のようなものとします。700px;(レスポンシブ用。100%;}を指定し、th,tdにも以下のように幅を指定しました。130px;}この場合は以下のようになります。CodePen.tdの数が少ない場合は幅がそれなりに整ってそうで良さそうなのですが、多い場合は場所によってまちまちです。それになぜか横スクロールが出ていません。TIPSth,tdにmin-widthでwidthと同じ幅を指定してあげるだけです。CodePen.今回は指定した幅がきちんと表示に反映できました。div内のtableについてOverflow:scrollの横スクロールが効かない(72328)|teratailこういったtableを作ったことがなかったので、先日初遭遇でした。table奥深いですね。試すブラウザfujihara2019.06.13はてブバシャログ。Web制作スタッフによるブログです。「現場で使えるテクニック」をモットーに、Web制作全般についてお届けします。