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

mono

こんにちは、monoです。

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

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

当記事では、

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

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

という方向けに、

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

について解説します。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

では、また。