55
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

はみ出たtableを横スクロールで滑らかに表示するCSS

たったの4行だけ

<table></table>に下記CSSを当てるだけ。

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

2行目: 隠れた部分をx方向(=横)にスクロールして表示する
3行目: 自動で改行しない(←必要であれば)
4行目: スマホで滑らかにスクールする

ただ、セルの幅が効かない

<table></table>に上記CSSを一括で当てると、予期せぬレイアウト崩れが起きる。
スクロールが必要ないテーブルの場合、セルは中身の幅にフィットした横幅までしか広がらないので、右側に空白が生まれてしまう・・・

解決策その1:tableをdivで囲む

スクロールが必要なテーブルだけに、CSSが当たるようにする。

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

解決策その2:tbodyをテーブル要素とする

table下のtbodyをdisplay:table;でtable要素にすることで、幅を指定することができる。

table {
  display: block;
  overflow-x: scroll;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
table tbody {
  width: 100%;
  display:table;
}
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
55
Help us understand the problem. What are the problem?