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

テーブルデータのスクロール

解決済

  • 質問者：guruguru2
  • 質問日時：
  • 回答数：5件

いつもお世話になっています。
テーブル作成時に、ヘッダ部分のみを固定し、
データ部分をスクロールしたいと思い、調べた結果
<thead>、<tbody>、<tfoot> タグ系を使うまでは分かりました。

が、<tbody>部分は、スクロールせずにただ普通に表示されているだけでした。
OKwebで検索し、サンプルを作成してくださった方がいたので
試しにソースをコピーして、ローカルで試してみましたがダメでした。

↓ちなみにソースです。width や height の値をいろいろ変えたりはしました。↓
<html>
<head>
<title>TbodyScroll</title>
</head>
<body>
<table border="1" width="200px" height="100px">
<thead>
<tr><th>M1</th><th>M2</th><th>M3</th></tr>
</thead>
<tfoot>
</tfoot>
<tbody style="width:180px;height:60px;overflow:scroll">
<tr><td>D1-1</td><td>D1-2</td><td>D1-3</td></tr>
<tr><td>D2-1</td><td>D2-2</td><td>D2-3</td></tr>
<tr><td>D3-1</td><td>D3-2</td><td>D3-3</td></tr>
<tr><td>D4-1</td><td>D4-2</td><td>D4-3</td></tr>
<tr><td>D5-1</td><td>D5-2</td><td>D5-3</td></tr>
<tr><td>D6-1</td><td>D6-2</td><td>D6-3</td></tr>
<tr><td>D7-1</td><td>D7-2</td><td>D7-3</td></tr>
</tbody>
</table>
</body>
</html>

自分なりに位置を固定して試したり、他のサイトも検索してみましたが、<tbody>部分を実際にスクロール
するサンプルソースがみつからず、ここに質問させていただきました。

ご教授お願いいたします。

通報する

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

質問の本文を隠す

A 回答 (5件)

No.5ベストアンサー

  • 回答者： deadlock
  • 回答日時：

うーん、後はこんな感じですかね。


theadだった部分とtbodyだった部分を別のテーブルに
分けて、元tbodyはdivの中でスクロールさせてます。
IE、Operaだとこれでスクロールにはなります。


<html>
<head>
<title>TbodyScroll</title>
</head>
<body>
<table border="1" width="200px" height="100px">
<tr><th>M1</th><th>M2</th><th>M3</th></tr>
</table>
<div style="width:180px;height:60px;overflow:scroll">
<table border="1" width="200px" height="100px">
<tr><td>D1-1</td><td>D1-2</td><td>D1-3</td></tr>
<tr><td>D2-1</td><td>D2-2</td><td>D2-3</td></tr>
<tr><td>D3-1</td><td>D3-2</td><td>D3-3</td></tr>
<tr><td>D4-1</td><td>D4-2</td><td>D4-3</td></tr>
<tr><td>D5-1</td><td>D5-2</td><td>D5-3</td></tr>
<tr><td>D6-1</td><td>D6-2</td><td>D6-3</td></tr>
<tr><td>D7-1</td><td>D7-2</td><td>D7-3</td></tr>
</table>
</div>
</body>
</html>


テーブルが繋がっていないのでこのままだと幅などがバラバラに
なります。(フレームなどを使っても同じことですが…)

・テーブル、カラムの幅を固定にする
・枠線は細くしておく
・スクロールバーの幅を考慮し、DIVの幅を調整しておく
・divやtableのパディングやマージンを調整する
などの調整が必要です。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。
いろいろなやり方があるので、検討してみます。

通報する
お礼日時：2005/06/12 11:14

No.4

  • 回答者： steel_gray
  • 回答日時：

縦スクロールだけのようですが参考URLにJavascriptを使ったサンプルがあります。


（なんとなく開発途上っぽいですが）

cssによるスクロールはgecko系(Netscape,firefox,Mozilla)では動くようですね。

参考URL：http://d.hatena.ne.jp/Mars/20050115
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。

>cssによるスクロールはgecko系(Netscape,firefox,Mozilla)では動くようですね。
一応、IEでも可能で、CSSで一旦は作成したのですが、
縦スクロールは良かったのですが、横スクロールをしたときに
ヘッダ部分も一緒に動かないので、<thead>を検討していました。
OnScrollイベントとかも調べてみようと思います。

通報する
お礼日時：2005/06/12 11:11

No.3

<TBODY>のスクロールに正式対応しているブラウザーは殆どありません。



>>参考
http://www.tohoho-web.com/html/tbody.htm

<TABLE>でスクロールを行うには、ちょっと邪道かも知れませんが、<IFRAME>を組み合わせるしかないと思います。

～～～～～ メイン ～～～～～
<html>
<head>
<title>TbodyScroll</title>
</head>
<body>
<table border="1" width="200px">
<tr>
<th>M1</th>
<th>M2</th>
<th>M3</th>
</tr>
<tr height="100px">
<td colspan=3>
<iframe src="tdata.html">インラインフレーム対応ブラウザでご覧下さい。</iframe>
</td>
</tr>
</table>
</body>
</html>
～～～～～ ここまで ～～～～～


～～～～～ tdata.html ～～～～～
<html>
<head>
<title>T_Data</title>
</head>
<body>
<table border="1" width="200px">
<tr><td>D1-1</td><td>D1-2</td><td>D1-3</td></tr>
<tr><td>D2-1</td><td>D2-2</td><td>D2-3</td></tr>
<tr><td>D3-1</td><td>D3-2</td><td>D3-3</td></tr>
<tr><td>D4-1</td><td>D4-2</td><td>D4-3</td></tr>
<tr><td>D5-1</td><td>D5-2</td><td>D5-3</td></tr>
<tr><td>D6-1</td><td>D6-2</td><td>D6-3</td></tr>
<tr><td>D7-1</td><td>D7-2</td><td>D7-3</td></tr>
</table>
</body>
</html>

～～～～～ ここまで ～～～～～

参考URL：http://www.tohoho-web.com/
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答ありがとうございます。
フレームですか。検討してみます。
ありがとうございます。

通報する
お礼日時：2005/06/12 11:02

No.2

↓ごめんなさい、IEは不可ですが、



Mozillaならできるらしいです。未確認ですが。
    • good
    • 0
    • 件
通報する
この回答へのお礼

再度、回答ありがとうございます。m(_ _)m
>Mozilla
ですか。ほえ～、初めて聞くブラウザです。
あまり、詳しくなくて…。
調べてみます。(^^)

通報する
お礼日時：2005/06/12 10:55

No.1

現行では正式対応のブラウザはないのではないですか？

    • good
    • 0
    • 件
通報する
この回答へのお礼

回答ありがとうございます。
そうみたいですね…。
ただ、<tbody>タグが出来るってだけ見たいですね(^^;

通報する
お礼日時：2005/06/12 10:51

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

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

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

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

おすすめ情報