テーブルをはみ出さないようにスクロールできるようにする方法

表をつくる時に、tableタグを利用すると思いますが、tableタグは基本的に改行してし下に表示されるような動作にはならないので、
横に長くなってしまった場合には、下記のように表示エリアからはみ出して表示されてしまいます。

悪い例

ヘッダー タイトル タイトル タイトル
タイトル
タイトル タイトル タイトル タイトル
見出し データ データ データ データ データ データ データ データ
見出し データ データ データ データ データ データ データ データ
見出し データ データ データ データ データ データ データ データ
見出し データ データ
データ データ データ データ データ データ

テーブルはみ出し対策

overflowで囲む


<div style="width:100%; overflow-y:scroll;">

<!-- テーブル -->

</div>
ヘッダー タイトル タイトル タイトル
タイトル
タイトル タイトル タイトル タイトル
見出し データ データ データ データ データ データ データ データ
見出し データ データ データ データ データ データ データ データ
見出し データ データ データ データ データ データ データ データ
見出し データ データ
データ データ データ データ データ データ

入力補助の囲い枠を使う

囲い枠では、はみ出さないように制御されておりますので、テキストのtable要素を追加していただければ、はみ出した部分はスクロールで表示されます。

データ表
ヘッダー タイトル タイトル タイトル
タイトル
タイトル タイトル タイトル タイトル
見出し データ データ データ データ データ データ データ データ
見出し データ データ データ データ データ データ データ データ
見出し データ データ データ データ データ データ データ データ
見出し データ データ
データ データ データ データ データ データ
スポンサーリンク
あなたはそのサイトで満足していますか?

サイトはただ作るだけで満足ですか?あなたのコンテンツはとっても有益なものがたくさんあります。よいコンテンツも埋もれてしまっては全く意味がありません。
Diverを使えば、SEO対策はもちろん、ユーザビリティーを考えられたデザインで、サイト回遊率、直帰率、再訪問がアップします。アフィリエイターだってブロガーだって関係無しです!!しかし、スケールの小さいサイトを量産するような方法には向いていません。サイトを育てて、長い間愛されることの出来るコンテンツを作成出来るのは、このDiverだけです。

この記事が気に入ったら
フォローしよう

最新情報をお届けします

Twitterでフォローしよう

おすすめの記事