本記事は執筆時点(2022年01月15日)の情報をベースにしております。掲載している情報が最新ではない可能性がありますので何卒ご容赦ください。
overflow:scrollを指定する
はみ出した部分をスクロールして見れるようにしたい時はCSSで指定が必要です。
ユーザー名 | フリガナ | 年齢 | メールアドレス |
---|---|---|---|
池袋太郎 | イケブクロタロウ | 30歳 | ikebukuro@sample.com |
新宿太郎 | シンジュクタロウ | 40歳 | shinjuku@test.com |
渋谷太郎 | シブヤタロウ | 50歳 | shibuya@sample.jp |
HTMLとCSSの記述の仕方
CSS
.scroll_area{ width:600px; overflow-x:scroll; } .scroll_area table{ width:900px; }
HTML
<div class="scroll_area" style="width:100%;max-width:600px;overflow-x:scroll;"> <table style="width:100%;"> <tr><th>ユーザー名</th><th>フリガナ</th><th>年齢</th><th>メールアドレス</th></tr> <tr><th>池袋太郎</th><td>イケブクロタロウ</td><td>30歳</td><td>ikebukuro@sample.com</td></tr> <tr><th>新宿太郎</th><td>シンジュクタロウ</td><td>40歳</td><td>shinjuku@test.com</td></tr> <tr><th>渋谷太郎</th><td>シブヤタロウ</td><td>50歳</td><td>shibuya@sample.jp</td></tr> </table> </div>
overflowの指定先に注意!
overflow:scrollはtableに対して指定してもスクロールバーは表示されません。
table要素を囲んだ親要素に対してoverflow:scrollを指定し、
table要素には幅をピクセルで指定しておくことが必要です。
まとめ
テーブルを使用した表を扱う場合はユーザビリティを意識して見やすくなるようにしましょう。
overflowはtableに指定してもスクロールバーが表示されないという点に注意が必要です。