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:
![はみ出たtableを横スクロールで滑らかに表示するCSS - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/a12e253c96b3cf2f169ad2ba2d0daf41b0748a96/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JUUzJTgxJUFGJUUzJTgxJUJGJUU1JTg3JUJBJUUzJTgxJTlGdGFibGUlRTMlODIlOTIlRTYlQTglQUElRTMlODIlQjklRTMlODIlQUYlRTMlODMlQUQlRTMlODMlQkMlRTMlODMlQUIlRTMlODElQTclRTYlQkIlOTElRTMlODIlODklRTMlODElOEIlRTMlODElQUIlRTglQTElQTglRTclQTQlQkElRTMlODElOTklRTMlODIlOEJDU1MmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPTk1MjYyYjg3MWNhNGUxZWEyODU0OWJmNzA0YzNhMmUx%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDB5bWVldG8mdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTgwN2M1ZGZkNWIxZWFlNDAwMzdkYTZjM2NhM2I1MmVl%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D4067f9bee1a4774846101dd5722a7913)