- ベストアンサー
Web画面作成での表形式のスクロールについて(2)
HTMLで表形式を定義した場合、表の情報が複数行存在していて、 スクロールの際、見出し部をスクロールしないで固定で表示させたい。 以前に同じような質問をしたのですが、いろいろ試してみて形式が多少 ちがっていたので再度、質問しました。 <body> <TABLE BORDER > <TR> <TH>一覧</TH> <TH> Name </TH> <TH> nen </TH> </TR> <TR> （データ部） </TR> </TABLE> </BODY> 上記の部分で＜TH＞の部分を固定させたい。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは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
その他の回答 (1)
- xruz
- ベストアンサー率50% (72/143)
はーい、xruzです。補足の例はサーバ側のCGIですね。 うーん、tHeadとtBodyの記述が無いようなのでスクロールは無理だと思います。 No1の例ではTHの行をtHeadで固定しtBody部分をscroll指定していますので データ部分がスクロールできるようになっています (HTML4.0仕様?) CGIでNo1の例のようなHTMLを出力する必要があります。 また、これに対応したブラウザで表示しないとスクロール表示でなく表全体が表示されます(Ie5.5sp2では表全体が表示されました、Ie6.0は動作環境が無いので不明です)。 がんばってくださいね(~:~i
お礼
いろいろありがとうございます。 サーバ側でのWeb開発は、初めてなので四苦八苦しています。がんばってみます。
補足
いろいろやってはみましたが、うまくいきません。 下記のようなプログラム形式なのですがどうでしょうか？ ＜プログラム例＞ --************************************************** -- 内部ヘッダ ************************************************** 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>');