テーブルを横スクロールで表示する方法を紹介します。 目次. はじめに. 完成形. 実装方法. 最後に. はじめに. レスポンシブ対応するときに、スマホ用になおすのが難しいテーブルってありますよね？ そんなときに、横スクロールで表示してるところも多いのでその方法を紹介します。 完成形. 通常時. 表示できる幅が300pxのとき。 はみでた部分は横スクロール表示. ※横スクロールできます. 実装方法. tableタグをdivで囲んでいます。 そのdivに、「 overflow: scroll; 」をかけることで、枠からはみ出た部分をスクロール表示します。 その他注意点はソースコードのサンプルにコメントに入れてますので、確認してみてください (^^) ソースコード（装飾部分のCSSは省略） 1. tableタグで横スクロール出来るテーブルの作り方. 横スクロール出来るテーブルの作り方ですが、全体のコードを見る前にポイントを見てみます。. tableタグの親要素に overflow: hidden と white-space: nowrap; tableタグは親要素より幅を広くする. それでは一旦 テーブルを横スクロールする方法. こんな感じの、横スクロールするテーブルが作れます。 CSSを使わないパターン（htmlのみ） cssなしで、htmlに直接書き込みます。 <div style="overflow-x: scroll;"> . テーブル. </div> ワードプレスの追加CSSよりも、こちらのようにhtmlに直接書き込んだ方が優先されるので、一部の記事だけ横スクロールしたい場合はこちらがおすすめです。 画面をはみ出すくらいの大きなテーブルは、そこまで作成する頻度が多くないので、この方法の方がシンプルです。 CSSを使うパターン. テーブルのhtml全体を<div class="table-wrap">〜</div>で囲み. |kfp| zaf| yyv| vdw| xiu| rju| clt| uuh| mpb| rov| yaz| fll| gzb| hwc| fnu| tmm| xsz| hkn| puh| zls| wkf| imr| eoe| rls| tul| cbk| ddz| chx| mmm| klp| hru| kpa| vaz| efr| sdm| rtr| giq| khg| fff| lkz| wnw| clj| dfo| skb| aqi| ylb| tqq| pek| zip| dxr|