• HOME > 
  • CSS > 
  • はみ出したtableにCSSでスクロールバーを表示させる方法...

はみ出したtableにCSSでスクロールバーを表示させる方法【overflow】

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像

本記事は執筆時点(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に指定してもスクロールバーが表示されないという点に注意が必要です。

広告
広告

関連する記事

サムネイル

CSSの疑似クラスnth-childとnth-of-type……

2024年11月07日
疑似クラスnth-childとnth-of-typeについて CSSの疑似クラス「:nth-child」と「:nth-of-type」はどちらも何番目の要素とい […]
サムネイル

CSSのみでスムーススクロールを実装する【scroll-be……

2024年08月01日
スムーススクロールはCSSだけで実装できる? これまでスムーススクロールはJavaScriptで実装するものと思い込んでいたのですが、先日ふとしたきっかけで、C […]
サムネイル

CSSのinline-flexの使いどころ【flexによる横……

2024年05月29日
inline-flexはCSSのdisplayプロパティの値の一つで、横並びレイアウトを作ることができる「flex」にインライン効果を持たせた性質があります。
サムネイル

CSSのセレクターで前方一致や部分一致を使って指定する方法

2024年05月16日
CSSでは属性の値を前方一致や部分一致でセレクターに指定できます。IDやクラス以外のhrefといった属性値であれば指定できるので、例えばリンク先ごとに処理を変えることも可能です。
サムネイル

CSSでテーブルの先頭行や先頭列を固定する方法【sticky……

2024年04月12日
CSSのpositionプロパティの「sticky」を使えば、CSSだけでテーブルの行も列も簡単に固定することができるのでご紹介します。情報量の多い表を作る場合は、スクロールした時に項目名などの行や列は固定させておいたほうが見やすくなります。
サムネイル

CSSのwhite-spaceプロパティの使い方【半角スペー……

2024年03月07日
SSのwhite-spaceは、テキストにおける半角スペース・改行・タブの扱いと折り返しの有無を設定するプロパティです。
サムネイル

CSSのメディアクエリでスマホでのホバーの挙動の対策を行う【……

2023年10月01日
最終更新日:2023年09月28日
要素をタップしたときにホバー時のスタイルが適用され続けるという経験はありませんか?CSSだけで簡単にスマホでの疑似要素「hover」の挙動の対策を行う方法をご紹介します。