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

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

投稿日:

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

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

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のメディアクエリでスマホでのホバーの挙動の対策を行う【……

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

CSSの疑似クラス「:focus」の使い方【focus-wi……

2023年05月01日
最終更新日:2023年05月31日
CSSでは疑似クラスである「:focus」を用いることで、フォーカス時のスタイルを設定することが可能です。一方「:focus-within」は、その要素自体もしくは子要素にフォーカスがある状態で有効になります。
サムネイル

CSSのclamp()・max()・min()の使い方【プロ……

2023年01月16日
最終更新日:2023年03月10日
clamp()・max()・min()はCSSのプロパティの値の指定に利用できる比較関数です。複数の値を比較し1つの値を導きだし上限や下限を設定できます。
サムネイル

CSSのfont-feature-settingsの使い方【……

2023年01月16日
最終更新日:2023年03月10日
font-feature-settingsは、文字本来のサイズに応じてフォントの文字詰め(カーニング)を設定するためのプロパティです。
サムネイル

CSSのletter-spacingで文字間隔を設定【中央寄……

2023年01月16日
最終更新日:2023年03月10日
letter-spacingは、テキストの文字と文字との間隔を設定するためのプロパティです。文字と文字の間を狭めたり、広げたりしてバランスを整えることができます。
サムネイル

CSSのtext-emphasisの使い方【圏点(けんてん)……

2023年01月16日
最終更新日:2023年03月10日
text-emphasisは、文字を強調したいときに付け加える圏点(けんてん)を表示するプロパティです。圏点のスタイル(形状)と色を自由に設定することが可能です。
サムネイル

CSSで中国語フォントを表示させる方法【font-famil……

2022年10月28日
最終更新日:2023年03月10日
簡体字を使用するにはサイトにGoogle FontsなどのWebフォントを導入して、CSSのfont-familyプロパティでそのフォントを指定します。