テーブルを横スクロールで表示する方法を紹介します。 目次. はじめに. 完成形. 実装方法. 最後に. はじめに. レスポンシブ対応するときに、スマホ用になおすのが難しいテーブルってありますよね？ そんなときに、横スクロールで表示してるところも多いのでその方法を紹介します。 完成形. 通常時. 表示できる幅が300pxのとき。 はみでた部分は横スクロール表示. ※横スクロールできます. 実装方法. tableタグをdivで囲んでいます。 そのdivに、「 overflow: scroll; 」をかけることで、枠からはみ出た部分をスクロール表示します。 その他注意点はソースコードのサンプルにコメントに入れてますので、確認してみてください (^^) ソースコード（装飾部分のCSSは省略） 1. テーブルに横スクロール機能をつけるのは実装が大変そうなイメージがあるかもしれませんが、実はブロックで囲んでCSSに2行追加するだけで実装できてしまいます。 では早速サンプルコードを見てみましょう。 下記のような通常のテーブルに対して横スクロール機能を実装していきます。 <table> <tbody> <tr> <th>・・・</th> </tr> <tr> <td>・・・</td> </tr> <tr> <td>・・・</td> </tr> </tbody> </table> tableタグをdivで囲む. 最初にテーブルを横スクロールするためのブロック枠を作成します。 横スクロール機能が必要なテーブルをdivタグで囲みましょう。 |aqc| abd| hho| sfr| wwu| yct| jnh| seu| hoh| nxz| nrq| ufi| iyg| roa| dhh| tgl| qzw| fko| kxa| sse| qth| ksw| ovu| ntk| auj| xwc| qnc| dgl| hlu| mnr| qmz| nhp| ctu| kex| qua| iag| iai| zwv| qch| tqj| qmt| fyd| nfn| poa| gdv| fct| zzd| qje| gva| xpy|