Help us understand the problem. What is going on with this article?

はみ出た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
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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