OKWAVEのAI「あい」が美容・健康の悩みに最適な回答をご提案!
-PR-
解決
済み

Web画面作成での表形式のスクロールについて(2)

  • すぐに回答を!
  • 質問No.188100
  • 閲覧数257
  • ありがとう数1
  • 気になる数0
  • 回答数2
  • コメント数0

お礼率 20% (24/115)

HTMLで表形式を定義した場合、表の情報が複数行存在していて、
スクロールの際、見出し部をスクロールしないで固定で表示させたい。
以前に同じような質問をしたのですが、いろいろ試してみて形式が多少
ちがっていたので再度、質問しました。
<body>
<TABLE BORDER >
<TR>
<TH>一覧</TH> <TH> Name </TH> <TH> nen </TH>
</TR>
<TR>
(データ部)
</TR>
</TABLE>
</BODY>
上記の部分で<TH>の部分を固定させたい。
通報する
  • 回答数2
  • 気になる
    質問をブックマークします。
    マイページでまとめて確認できます。

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

  • 回答No.1
レベル10

ベストアンサー率 50% (72/143)

こんにちはpatakさん、xruzです
ブラウザが対応していれば、以下の記述で見出しが固定しデータ部がスクロールします。
(mozilla0.9.5で動作確認、NN6.2は表示が少し変でした)

<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>

がんばってくださいね(~:~i
補足コメント
patak

お礼率 20% (24/115)

いろいろやってはみましたが、うまくいきません。
下記のようなプログラム形式なのですがどうでしょうか?


<プログラム例>

--**************************************************
-- 内部ヘッダ
**************************************************
htp.p('<CENTER>');
htp.p('<TABLE BORDER CELLSPACING=0 CELLPADDING=0 WIDTH="100%" BGCOLOR="#D3D3D3">');
htp.p('<TR>');
htp.p('<TD ALIGN=CENTER HEIGHT="28">');
htp.p('<B> 一覧 </B>');
htp.p('</TD>');
htp.p('<TD ALIGN=RIGHT HEIGHT="28">');
htp.p('<INPUT TYPE="BUTTON" VALUE="確定" NAME="FIX" onClick="SelDecision()">');
htp.p('</TD>');
htp.p('</TR>');
htp.p('</TABLE>');
htp.p('</CENTER>');

--**************************************************
-- データ一覧
--**************************************************
htp.p('<div align="center"><center>');
htp.tableopen('BORDER');
htp.tableRowOpen;
htp.tableHeader('コード');
htp.tableHeader('名');
htp.tableRowClose;

htp.p('<TR>');
(------------ データ部--------)
htp.p('</TR>');
htp.p('</table>');
htp.p('<hr size="1" color="#00BFFF" style="margin-top: 10px">');
htp.p('</center></div>');
---------------------------------
htp.p('</FORM>');
htp.p('</BODY>');
htp.p('</HTML>');
投稿日時 - 2001-12-20 17:25:37
-PR-
-PR-

その他の回答 (全1件)

  • 回答No.2
レベル10

ベストアンサー率 50% (72/143)

はーい、xruzです。補足の例はサーバ側のCGIですね。 うーん、tHeadとtBodyの記述が無いようなのでスクロールは無理だと思います。 No1の例ではTHの行をtHeadで固定しtBody部分をscroll指定していますので データ部分がスクロールできるようになっています (HTML4.0仕様?) CGIでNo1の例のようなHTMLを出力する必要があります。 また、これに対応した ...続きを読む
はーい、xruzです。補足の例はサーバ側のCGIですね。
うーん、tHeadとtBodyの記述が無いようなのでスクロールは無理だと思います。

No1の例ではTHの行をtHeadで固定しtBody部分をscroll指定していますので
データ部分がスクロールできるようになっています (HTML4.0仕様?)
CGIでNo1の例のようなHTMLを出力する必要があります。

また、これに対応したブラウザで表示しないとスクロール表示でなく表全体が表示されます(Ie5.5sp2では表全体が表示されました、Ie6.0は動作環境が無いので不明です)。

がんばってくださいね(~:~i
お礼コメント
patak

お礼率 20% (24/115)

いろいろありがとうございます。
サーバ側でのWeb開発は、初めてなので四苦八苦しています。がんばってみます。
投稿日時 - 2001-12-21 10:47:56
このQ&Aで解決しましたか?
関連するQ&A
-PR-
-PR-
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する
-PR-
-PR-
-PR-

特集


いま みんなが気になるQ&A

関連するQ&A

-PR-

ピックアップ

-PR-
ページ先頭へ