プロが教えるわが家の防犯対策術！

テーブルにスクロールバーを付ける方法を教えて下さい。

解決済

  • 質問者：poupou
  • 質問日時：
  • 回答数：3件

今HPを作ってまして分からない事だらけなのでお知りな方力をお貸し下さい。
セル内に文を書いてるのですが間延びするのが嫌なのでスクロールバーをつけようかと思うのですがドリームウェーバー（MAC)でやり方を教えてください。よろしくお願い致します。その他の質問も教えて頂けるとありがたいです。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.2ベストアンサー

  • 回答者： seaw
  • 回答日時：

3o-clockさんが、overflow:scroll;でやる方法を挙げてくださっていますが。


overflow: auto;を使う方法もあります。

※参考
http://www6.plala.or.jp/go_west/nextcss/ref/prp/ …


一応サンプルを作っておきました。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="robots" content="NOINDEX, NOFOLLOW">
<style type="text/css">
body
{
background-color: #ffffff;
color: #000000;
}

table.sample
{
background-color: #000000;
border: 1px solid #000000;
width: 400px;
hight: 400px;
}
table.sample td
{
background-color: #ffffff;
border: 0;
padding: 3px;
}
table.sample td div
{
width: 200px;
hight: 200px;
overflow: auto;
}
</style>
<title>サンプル</title>
</head>
<body>

<table class="sample" cellspacing="1">
<tr>
<td>AAAAAAAAAA</td>
<td>BBBBBBBBBB</td>
</tr>
<tr>
<td>CCC</td>
<td>
<div>
DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD
<br>
DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD
<br>
DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD
<br>
DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD
<br>
DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD
<br>
DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD
<br>
DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD
<br>
DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD
<br>
DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD
<br>
DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD
<br>
DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD
</div>
</td>
</tr>
</table>


</body>
</html>
    • good
    • 0
    • 件
通報する

No.3

テーブルの中身をスクロールさせるのは、確か環境によって認識状態がかなり変わったと思います。


IEにはコレに関するバグがあるとも解説書で読みました（ややうろ覚え）
テーブルの外側からスクロールさせることをお勧めします。

あと、#1 3o-clockさんが提示されているリンク先のソースだと、非IE環境で派手に表示が崩れます…。
（HTMLの仕様上、本来overflowはdivやpなどブロック要素にしか適用できない。）

↓こんな感じで…。

<div style="width:400px;overflow:auto;">
<table border width="800">
<tr>
<td>AAAAAAAAAA AAAAAAAAAA AAAAAAAAAA <BR>
AAAAAAAAAA AAAAAAAAAA AAAAAAAAAA <BR>
AAAAAAAAAA AAAAAAAAAA AAAAAAAAAA
</td>
<td>AAAAAAAAAA AAAAAAAAAA AAAAAAAAAA <BR>
AAAAAAAAAA AAAAAAAAAA AAAAAAAAAA <BR>
AAAAAAAAAA AAAAAAAAAA AAAAAAAAAA
</td>
</tr>
<tr>
<td>AAAAAAAAAA AAAAAAAAAA AAAAAAAAAA <BR>
AAAAAAAAAA AAAAAAAAAA AAAAAAAAAA <BR>
AAAAAAAAAA AAAAAAAAAA AAAAAAAAAA
</td>
<td>AAAAAAAAAA AAAAAAAAAA AAAAAAAAAA <BR>
AAAAAAAAAA AAAAAAAAAA AAAAAAAAAA <BR>
AAAAAAAAAA AAAAAAAAAA AAAAAAAAAA
</td>
</tr></table>
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： 3o-clock
  • 回答日時：

overflow:scroll; を使う事くらい。



http://capsule.chips.jp/ts_11.html

テーブル　スクロールでぐぐって。
    • good
    • 0
    • 件
通報する

このQ&Aに関連する人気のQ&A

「テーブル バー」に関するQ&A： ファミレスで勉強

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するQ&A

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

専門家回答数ランキング

専門家

※過去一週間分の回答数ランキングです。

Q質問する（無料）

他の専門家の回答をチェック

このQ&Aと関連する良く見られている質問

Qテーブルの一部分のセルだけにスクロールバーを付けたいのですが、うまくいきません。

#test1はちゃんとスクロールバーが付くのに、
テーブル内の設定したセルにはスクロールバーが付きません。
tableタグやth,tdタブにも設定したりと色々しましたが、
付きません。
なぜなのでしょうか。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>test page</title>
<style type="text/css">


table {
background:yellow;

}

th,td {
width:200px;
border:solid 1px #000000;
overflow:scroll;
}

#test1 {
width:100px;
overflow:scroll;
}

</style>
</head>
<body>




テーブル
<br />

<table>
<tr>
<th>見出し１</th><td>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</td>
</tr>
<tr>
<th>見出し２</th><td></td>
</tr>
<tr>
<th>見出し３</th><td>本文</td>
</tr>
</table>


<div id="test1">あああああああああああああああああああああああああああああああああ</div>

</body>
</html>

#test1はちゃんとスクロールバーが付くのに、
テーブル内の設定したセルにはスクロールバーが付きません。
tableタグやth,tdタブにも設定したりと色々しましたが、
付きません。
なぜなのでしょうか。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>test page</titl...続きを読む

Aベストアンサー

> なぜなのでしょうか。

overflowプロパティの適用対象はblock要素”display : block”ですが、<td>／<th>はそれぞれtable要素のグループであり”display : table-cell”ですので適用外となります。
なので、ANo.1の回答者様の仰る通り、セルの中に更にblock要素のタグを入れた上で、それに対するスタイル設定でoverflowプロパティを使用して下さい。
（overflowプロパティ参考）http://w3g.jp/css/display_position/overflow

他の回答も見る

Qテーブルをスクロールさせるときのスクロールの位置

お世話になります。

IE限定の質問です。

テーブルのヘッダを固定してスクロールバーを右に付けるとします。
　↓例↓
===================================
<html>
<head>

<style type="text/css">
.FreezHeader
{
background-color:#ffffff;
position:relative;
top:expression(this.offsetParent.scrollTop);
z-index:10;
}
</style>

</head>
<body>

<div id="divFrame" style="overflow:auto; position:relative; width:100%; height:100px;">
<table cellspacing="0" cellpadding="0" width="100%" border="1">
<tr class="FreezHeader"><th>あ</th><th>か</th><th>さ</th></tr>
<tr><td>い</td><td>き</td><td>し</td></tr>
<tr><td>う</td><td>く</td><td>す</td></tr>
<tr><td>え</td><td>け</td><td>せ</td></tr>
<tr><td>お</td><td>こ</td><td>そ</td></tr>
<tr><td>あ</td><td>か</td><td>さ</td></tr>
<tr><td>い</td><td>き</td><td>し</td></tr>
<tr><td>う</td><td>く</td><td>す</td></tr>
<tr><td>え</td><td>け</td><td>せ</td></tr>
<tr><td>お</td><td>こ</td><td>そ</td></tr>
</table>
</div>

</body>
</html>
===================================


上記のような HTML を書いた場合，
【下の図】↓の「Ａ」のように表示されます。


「Ａ」のようにではなく
スクロールバーの位置(TOPの位置)をヘッダの下から開始させたいのです。
できれば 【下の図】↓の「Ｂ」のような感じで
それが難しいとした場合， 【下の図】↓の「Ｃ」のような感じです。

このように表示させる方法を教えていただきたく思います。


IEのみで使えれば良いので，
他のブラウザでの見え方は考えなくて良いです。
ただ，
IE 5.5 や 6 などなるべく低いバージョンでも見えるようにと
なるべく JavaScript の使用は避けて
なおかつ，なるべくシンプルな方法が希望です。

お世話になります。

IE限定の質問です。

テーブルのヘッダを固定してスクロールバーを右に付けるとします。
　↓例↓
===================================
<html>
<head>

<style type="text/css">
.FreezHeader
{
background-color:#ffffff;
position:relative;
top:expression(this.offsetParent.scrollTop);
z-index:10;
}
</style>

</head>
<body>

<div id="divFrame" style="overflow:auto; position:relative; width:100%; height:100px;">
<table cellspacing="0" cellpadding="0" width="100%"...続きを読む

Aベストアンサー

結論です。IEでは簡単には無理です。参考サイトは最後に書いておきます。

　まず、データの多いtableは、<thead><tfoot><tbody>でマークアップすべきです。これは印刷したとき(ユーザーエージェントがページ媒体であるとき)に、それぞれのページに見出しを表示すべきだからです。先の回答を実際に印刷すると明白です。ページ媒体でスクロールは出来ませんから、overflowにscrollないしautoを指定した場合は、スタイルシートでスクリーン端末のみ適用されるよう記述することは必須です。スタイルシートのデフォルトはall(仕様書ではscreenですが、実装はallになっています。HTML5では　allに変更される)

　期待のように表示させるためには、本来はtbodyにoverflowを指定すればよいのですが、これはtable要素には使えないことになっています。(IEにはバグあり使えそうに見えます)
　そのため、スタイルシートでtbodyをblockに変換してやる必要があります。しかしその時点でIEは、tbodyの高さをtrに継承してしまうバグがあります。またスクロールバー自体が表示されません。

　IEで期待通りの表らしき形にしたいのなら、table以外でマークアップしてすべての要素table,thead,tfoot,tbody,tr,td,th,col,cilgroup・・をブロックに下からスタイルシートで配置しなおさないとなりません。
　当然ですが、スタイルシートを読まないブラウザ(テキストブラウザ、点字端末、読み上げソフト、そしてプリンター)や他の端末、検索エンジンには意味が通じないことになります。

　仕方なく、table全体を<div>で囲って、thead部分をfixedで固定する方法も試したのですが、IEのみfixedで位置を決めない場合は影も形も消えうせてしまいます。--もちろん標準ブラウザではきちんと整形されます。

｛IEのみで使えれば良いので，｝
　は、印刷やその他すべてを犠牲にすれば、表の見出しと本体を別のtableにするなど、文書構造を無視したマークアップ・・あるいは、リストなどでマークアップすることになりますが、決してすべきではない邪道になります。

☆tbodyをscrollさせる方法は下記サイトをご覧ください。
Tableのヘッダ(thead)を固定して、<tbody>内をスクロールさせる方法 » 株式会社ジラフィー(Giraffy) ( http://giraffy.jp/blog/2009/09/11/css/107/ )

　今回は質問ありがとうございます。自分自身よい勉強になりました。ＩＥがクソであることも再確認できたし・(笑)

結論です。IEでは簡単には無理です。参考サイトは最後に書いておきます。

　まず、データの多いtableは、<thead><tfoot><tbody>でマークアップすべきです。これは印刷したとき(ユーザーエージェントがページ媒体であるとき)に、それぞれのページに見出しを表示すべきだからです。先の回答を実際に印刷すると明白です。ページ媒体でスクロールは出来ませんから、overflowにscrollないしautoを指定した場合は、スタイルシートでスクリーン端末のみ適用されるよう記述することは必須です。スタイルシートのデフォル...続きを読む

他の回答も見る
ページトップページトップ

Q質問する（無料）

人気Q&Aランキング

おすすめ情報