CSSだけで、テーブルにスクロールバーを表示させたいのですが…

Question

CSSを使い、テーブルにスクロールバーを表示させたいのですが

:

上記の方法だと確かにスクロールバーは表示されるのですが、出来ればDIVを使わずに、作っておいたCSSを適用するだけで、テーブルにスクロールバーを表示させることは可能でしょうか？出来れば、スクロールバーの色を変更して、横(X軸)のスクロールバーも消したいのですが… CSSで .scroll { overflow: scroll; visibility: visible; height: 100px; width: 140px; } とやってみたのですが、どうしてもスクロールバーが表示されません。何が足りないのか、もしくは根本から間違っているのかがわかりません。ご存知の方教えて下さい。

abril · Accepted Answer

> 出来ればDIVを使わずに、作っておいたCSSを適用するだけで、テーブルにスクロールバーを表示させることは可能でしょうか？何だか仰っている事がいまいち分かりづらいのですが、以下の2種類を推測しました。【A】「を

で入れ子にするマークアップではなく、

自体に定義したスタイルでスクロールバーを出したい」という意味であれば、できません。はみ出した部分の処理をする（スクロールバーの表示・非表示を制御）overflowプロパティは適用対象がブロック要素の為、table要素である

には適用されないからです。【B】「

の様にHTMLのマークアップに直接style属性で定義するのではなく、外部ファイル（もしくは内で）でまとめて定義したスタイルを適用させたい」ということであれば、できます。以下は【B】の場合のサンプルです。 XML宣言有りのXHTML 1.1で検証。IE6.0/7.0、Firefox2.0～、Opera9.25 on Windows XPで同様の結果を得ています。 ---------------------------------------------------------------------- 【HTML】 ----------------------------------------------------------------------

見出し1	データデータデータデータ
見出し2	データデータデータデータ
見出し3	データデータデータデータ

---------------------------------------------------------------------- 【CSS】 ---------------------------------------------------------------------- div.hoge { width: 140px; height: 100px; overflow: auto; } div.hoge table { border-collapse: collapse; } th, td { font-size: 12px; border: solid 1px #000000; padding: 5px; } ---------------------------------------------------------------------- ・"overflow: scroll"とすると、必ずXY両軸のスクロールバーが表示されます。"overflow: auto"にしておけば、子要素（この場合は）の幅が親要素の幅を超えていない限り、X軸のスクロールバーは表示されません。Y軸のスクロールバーは子要素の高さが親要素の高さを超えた時点から発生します。高さに満たない場合は自動的に表示となります。・"overflow-y""overflow-x:"はIEの独自拡張の為、他の環境では効きません。・"visibility"の値はディフォルが"visible"なので、この場合は特に定義する必要はありません。 > スクロールバーの色を変更して "scrollbar-foo-color"（fooの部分：base、face、track、arrow、highlight、shadow、3dlight、darkshadow）"というプロパティがありますが、同じくIEの独自拡張の為、他の環境では効きません。実現したいイメージが異なる様であれば補足して下さい。

abril · Answer

すみません、タイポがありましたので訂正しておきます。
【誤】
> 高さに満たない場合は自動的に表示となります。
↓
【正】
> 高さに満たない場合は自動的に非表示となります。

goldfox · Answer

divをなくして「どこに」スクロールバー（overflow）を付けるのですか？

＞横(X軸)のスクロールバーも消したいのですが
divの横幅が300px。tableの横幅が300px、スクロールバーの幅が20pxとして、divの中身が300＋20ですから横スクロールバーが出ます。
divの横幅を増やせば解決できるかと。

line301 · Answer

/* div02 */ div.div02{ height:100px; overflow:auto; border:1px solid #cccccc; padding:0.5em; margin:1em auto; }

吾輩（わがはい）は猫である。名前はまだ無い。　どこで生れたかとんと見当（けんとう）がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

CSSだけで、テーブルにスクロールバーを表示させたいのですが…

> 出来ればDIVを使わずに、作っておいたCSSを適用するだけで、テーブルにスクロールバーを表示させることは可能でしょうか？

すみません、タイポがありましたので訂正しておきます。

divをなくして「どこに」スクロールバー（overflow）を付けるのですか？

/* div02 */

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング