みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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

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

投稿日時 - 2008-04-23 13:43:14

QNo.3969761

すぐに回答ほしいです

質問者が選んだベストアンサー

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

何だか仰っている事がいまいち分かりづらいのですが、以下の2種類を推測しました。
【A】
「<table>を<div>で入れ子にするマークアップではなく、<table>自体に定義したスタイルでスクロールバーを出したい」という意味であれば、できません。はみ出した部分の処理をする(スクロールバーの表示・非表示を制御)overflowプロパティは適用対象がブロック要素の為、table要素である<table>には適用されないからです。

【B】
「<div style="height:60px; width:300px; overflow-y:scroll;">の様にHTMLのマークアップに直接style属性で定義するのではなく、外部ファイル(もしくは<head>内で<style type="text/css">~</style>)でまとめて定義したスタイルを適用させたい」ということであれば、できます。

以下は【B】の場合のサンプルです。
XML宣言有りのXHTML 1.1で検証。IE6.0/7.0、Firefox2.0~、Opera9.25 on Windows XPで同様の結果を得ています。
----------------------------------------------------------------------
【HTML】
----------------------------------------------------------------------
<div class="hoge">
<table cellspacing="0" cellpadding="0" border="0" summary="サンプル">
<tr>
<th>見出し1</th>
<td>データデータデータデータ</td>
</tr>
<tr>
<th>見出し2</th>
<td>データデータデータデータ</td>
</tr>
<tr>
<th>見出し3</th>
<td>データデータデータデータ</td>
</tr>
</table>
</div>
----------------------------------------------------------------------
【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"にしておけば、子要素(この場合は<table>)の幅が親要素の幅を超えていない限り、X軸のスクロールバーは表示されません。Y軸のスクロールバーは子要素の高さが親要素の高さを超えた時点から発生します。高さに満たない場合は自動的に表示となります。
・"overflow-y""overflow-x:"はIEの独自拡張の為、他の環境では効きません。
・"visibility"の値はディフォルが"visible"なので、この場合は特に定義する必要はありません。

> スクロールバーの色を変更して

"scrollbar-foo-color"(fooの部分:base、face、track、arrow、highlight、shadow、3dlight、darkshadow)"というプロパティがありますが、同じくIEの独自拡張の為、他の環境では効きません。

実現したいイメージが異なる様であれば補足して下さい。

投稿日時 - 2008-04-23 15:16:41

お礼

詳しい説明をありがとうございます。
お聞きしたかったのは、正にAのことでした。
Table要素では出来ないんですね。
他にも色々とありがとうございます。
参考になりました。
回答ありがとうございます。

投稿日時 - 2008-04-23 20:52:19

ANo.3

このQ&Aは役に立ちましたか?

3人が「このQ&Aが役に立った」と投票しています

回答(4)

ANo.4

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

【正】
> 高さに満たない場合は自動的に非表示となります。

投稿日時 - 2008-04-23 15:21:18

ANo.2

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

>横(X軸)のスクロールバーも消したいのですが
divの横幅が300px。tableの横幅が300px、スクロールバーの幅が20pxとして、divの中身が300+20ですから横スクロールバーが出ます。
divの横幅を増やせば解決できるかと。

投稿日時 - 2008-04-23 15:07:16

お礼

質問がわかりづらくて申し訳ありません。
自分でも良くわからなかったもので、質問が変になってしまいました。
横のスクロールバーは、横幅を増やせば良いのですね。
参考になりました。
回答ありがとうございます。

投稿日時 - 2008-04-23 20:49:56

ANo.1

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

<div class="div02">
<p>吾輩(わがはい)は猫である。名前はまだ無い。
 どこで生れたかとんと見当(けんとう)がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>

</div>

投稿日時 - 2008-04-23 14:12:58

お礼

早速のご回答ありがとうございます。
やってみたのですが、出来ませんでした。
何分初心者なもので…すみません。
でも参考になりました。
もう少し出来るかどうかやってみます。

投稿日時 - 2008-04-23 20:47:22

あなたにオススメの質問