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

解決済

質問者：patak
質問日時：2001/12/20 13:00
回答数：2件

HTMLで表形式を定義した場合、表の情報が複数行存在していて、
スクロールの際、見出し部をスクロールしないで固定で表示させたい。
以前に同じような質問をしたのですが、いろいろ試してみて形式が多少
ちがっていたので再度、質問しました。
<body>
<TABLE BORDER >
<TR>
<TH>一覧</TH> <TH> Name </TH> <TH> nen </TH>
</TR>
<TR>
（データ部）
</TR>
</TABLE>
</BODY>
上記の部分で＜TH＞の部分を固定させたい。

通報する

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

質問の本文を隠す

回答 (2件)

No.2

回答者： xruz
回答日時：2001/12/20 18:44

はーい、xruzです。

補足の例はサーバ側のCGIですね。
うーん、tHeadとtBodyの記述が無いようなのでスクロールは無理だと思います。

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

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

がんばってくださいね(~:~i

- 0
- 件

通報する

この回答へのお礼

いろいろありがとうございます。
サーバ側でのWeb開発は、初めてなので四苦八苦しています。がんばってみます。

通報する

お礼日時：2001/12/21 10:47

No.1ベストアンサー

回答者： xruz
回答日時：2001/12/20 15:04

こんにちは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

この回答への補足

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

＜プログラム例＞

--**************************************************
-- 内部ヘッダ
**************************************************
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>');