【HTML】横スクロールするTABLEの作り方!幅の指定方法も解説

2019-10-07

【HTML】横スクロールするTABLEの作り方!幅の指定方法も解説
mono
mono
こんにちは、monoです。

スマホやタブレットのユーザーが増え、Webサイトがレスポンシブ対応するのは当たり前の時代になりました。

TABLE要素の場合だと、横スクロールできるようにすることでスマホやタブレットでも見やすくしているサイトが多いようですね。

当記事では、

横スクロールするTABLEってどうやって作るのか知りたい

横スクロールするTABLEで幅指定する方法を知りたい

という方向けに、

  1. 横スクロールするTABLEを作る方法
  2. 横スクロールするTABLEの幅の指定方法

について解説します。

横スクロールするTABLEを作る方法

TABLEを横スクロールするには、

要素に対してCSSを指定する必要があります。

指定するCSSは以下です(コピペして使えます)

 commandtable {
  display: block;
  overflow-x: scroll;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

念のため、それぞれのCSSを解説しておきますね。

CSS 意味
display:block table要素にblock属性を持たせる
overflow-x:scroll 横方向に画面からはみ出た部分を、
スクロールできるようにする
white-space:nowrap 自動で改行されないようにする
(後述の方法で幅を指定する場合は不要)
-webkit-overflow-scrolling:touch 滑らかにスクロールされるようにする

一応解説しましたが、プログラミングって動けばOKなところがあるので、正直意味がわからなくでも上記のコードをコピペして思ったように動けばとりあえず目標は達成です。

横スクロールするTABLEの幅の指定方法

上述の方法でTABLEが横スクロールになった方はお気づきかもしれませんが、実は「TABLEの幅指定ができない状態」になっています。

普通table要素だとth要素やtd要素で「width」を設定すれば幅を指定できるのですが、TABLEを横スクロールできるようにするとそれができなくなります。

この問題の解決方法としては、下記の方法で、「width」と一緒に「min-width」も指定してあげればOKです。

 commandth {
  //同じ値にする
  width:100px;
  min-width:100px;
}
td {
  //同じ値にする
  width:100px;
  min-width:100px;
}

「幅の最低値を指定して上げることで、それ未満の幅にはならなくなる」というところがミソですね。

結構単純ですが、意外とハマる人が多いと思ったので解説しました。

まとめ

今回は「横スクロールするTABLEを作り方」と「横スクロールするTABLEの幅の指定方法」について解説しました。

ちょっとした小技ですが、記事の読みやすさが「直帰率」や「滞在時間」にも影響するので、あまり疎かにはしない方が良いでしょう。

では、また。

  • この記事を書いた人

mono

26歳♂首都圏住みの副業会社員/ギークでズボラないい暮らし/ADHD・HSP傾向/将来はサイドFIREでのんびり暮らしたい/楽天経済圏/リベ大生/インデックス・高配当株投資300万/お仕事の依頼はこちら

スキルを磨く プログラミング

CSS HTML WordPress

© 2021 monoblog