- ベストアンサー
Web画面作成での表形式のスクロールについて(2)
- みんなの回答 （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開発は、初めてなので四苦八苦しています。がんばってみます。
関連するQ&A
- Web画面作成での表形式のスクロールについて
＜Web画面作成での表形式のスクロールについて＞ HTMLで表形式を定義した場合、表の情報が複数行存在していて、スクロールの際、見出し部をスクロールしないで固定で表示させたい。
- ベストアンサー
- CSS
- HTMLを使って表を作成しているのですが、枠線がキレイに揃いません。
HTMLを使って表を作成しているのですが、枠線がキレイに揃いません。 下のソースで５０と１３０のとこをきちんとエクセルのように枠線揃えたいのですが、 どのようにしたら良いのでしょうか？ よろしくお願いします。 <HTML> <BODY> <TABLE border=1><TR> <TH width="50"></TH> <TH width="135"></TH> <TH width="65"></th> <TH width="65"></th> <TH width="65"></th> </TR><TR> <TD colspan="5"> <TABLE border=1><TR> <TD width=50>50</TD> <TD width=200>200</TD> <TD width=130>130</TD> </TR><TR> <TD width=50>50</TD> <TD width=200>200</TD> <TD width=130>130</TD> </TR></TABLE> </TD> </TR><TR> <TD colspan="5"> <TABLE border=1><TR> <TD width=50 rowSpan=2>50</TD> <TD width=135 rowSpan=2>135</TD> <TD width=65 rowSpan=2>65</TD> <TD width=130 colSpan=2>130</TD> </TR><TR> <TD width=65>65</TD> <TD width=65>65</TD> </TR><TR> <TD width=50>50</TD> <TD width=135>135</TD> <TD width=65>65</TD> <TD width=65>65</TD> <TD width=65>65</TD> </TR><TR> <TD width=250 colSpan=3>250</TD> <TD width=65>65</TD> <TD width=65>65</TD> </TR></TABLE> </TD> </TR><TR> <TD colspan="5"> <TABLE border=1><TR> <TD width=250>250</TD> <TD width=130>130</TD> </TR></TABLE> </TD> </TR> </TABLE> </BODY> </HTML>
- ベストアンサー
- HTML
- フルCSSプロフェッショナルテンプレの表作成
ビルダー15に同梱のフルCSSプロフェッショナルテンプレートで、まったく別の色の表を作成したいのですが、フルCSSのせいで、背景色が反映されません。 １、まったく別の表のためのCSSはどのように書けばいいのでしょうか？ ２、それをどのように記述すればよいでしょうか？ ３、または、フルCSS”表のデザイン”で選んだ表は、文字が小さく嫌なので、文字を大きく表示する方法はあるのでしょうか？（文章ごとにフォントサイズの変更しなきゃだめ？） ↓↓こんな感じで書いてみたのですが・・・。 CSSコード .example table { width: 640px; border: 1px #ff6347 solid; border-collapse: collapse; } .example td { border: 1px dashed; background-color: #ff6347; padding: 0 6px; } .example th { border: 1px dashed; background-color: #9acd32; } HTMLコード <div class="example"> <table> <tr> <th>1-1</th> <th>1-2</th> <th>1-3</th> <th>1-4</th> </tr> <tr> <td>2-1</td> <td>2-2</td> <td>2-3</td> <td>2-4</td> </tr> <tr> <td>3-1</td> <td>3-2</td> <td>3-3</td> <td>3-4</td> </tr> </table> </div>
- ベストアンサー
- ホームページ作成ソフト
- 表と画面の余白について
ホームページ作成初心者です。 Yahoo!のフリースペースGeoCitesで、アドバンストHTMLエディタで直接タグを打って作成していますが、表の行を追加すると、追加した行の幅だけ上部に余白ができてしまい、画面の下半分に表が表示されます。 余白はタイトルと表の間にできますが、タイトルを削除したり表の下に移動させても上面の余白は変わりません。不要な余白をなくす方法を教えて下さい。 ソースは以下の通りで、△△△の項目の<tr></tr>は２０位あります。 <html> <head> <title>◯◯◯</title> </head> <!--color--> <body bgcolor="#ddfff" text="#000000" link="#0000ff" vlink="#ff0000"> <center> <!--HEAD1--> <h1>タイトル</h1> <table border="1" cellpadding="3" width="700" cellspacing=1 bordercolor="#dddddd"> <tr bgcolor="#ccfff"> <th>◯◯◯</th> <th>◯◯◯</th> <th>◯◯◯</th> <th>◯◯◯</th> </tr> <tr> <td align="center">△△△</td> <td align="center">△△△</td> <td align="center">△△△</td> <td align="center">△△△</td> </tr> </table> </body> </html>
- 締切済み
- HTML
- テーブルの線の幅を一重の線にしたい
<HTML DIR=LTR> <HEAD> </HEAD> <BODY> <TABLE border=1 bordercolor="#808080"> <TR> <TH>タイトル</TH> </TR> <TD>aaa</TD> </TR> <TR> <TD>bbb</TD> </TR> <TR> <TD>ccc</TD> </TR></TABLE> </BODY> </HTML> これにすると画像のように線の幅が二重線になってしまうのですが、 一重にするにはどうすればいいですか？ <TABLE border=1 を<TABLE border=0にすると、線が消えてしまいます。
- ベストアンサー
- HTML
- HTML 表の中の表
趣味でHPを作り始めたのですが表のところがよくわかりません。 大きな表（外枠）の中に2個目の表を作りたいのですが、どうしても2個目の表が大きな表（外枠）の真ん中に来てしまいます。2個目の表が大きな表の一番上にくっつくようにしたいのですがどうしたらいいのでしょうか。宜しくおねがいします。 <html> <body> <table border="1" height="500" width="300"> <tr> <td> <table border="1" width="100%"> <tr > <td colspan="3" > </td> </tr> <tr> <td colspan="3"> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </table> </td> </tr> </table> </body> </html>
- 締切済み
- その他（趣味・娯楽・エンターテイメント）
- 表(テーブル)の表示について
山手線の駅名が５秒間隔でスクロールするプログラムを作りたいと思っています。 駅名と所要時間は配列に固定文字として格納し、それを表示していきたいのですが、HTMLで作る事は可能でしょうか。 下記のプログラムを作ってみたのですが、全然動いてくれません。（とりあえず、テーブルの値を１件だけ表示させるプログラム） 対応に心当たりがある方、教えてください。 <HTML> <HEAD> <META CONTENT="text/html; charset=Shift_JIS"> </HEAD> Station1=new Array("東京","神田","秋葉原","御徒町","上野","鶯谷","日暮里","西日暮里","田端","駒込","巣鴨","大塚","池袋","目白", "高田馬場","新大久保","新宿","代々木","原宿","渋谷","恵比寿","目黒","五反田","大崎","品川","田町","浜松町","新橋","有楽町") Station2=new Array("0","2","4","6","8","10","12","14","16","18","20","22","24","26", "28","30","32","34","36","38","40","42","44","46","48","50","52","54","56") <BODY BGCOLOR="#00FFFF"> <TABLE BORDER> <TR> <TH WIDTH="80">駅名</TH> <TH WIDTH="100">所要時間(分)</TH> </TR> <TR> <TD WIDTH="80">Station1[0]</TH> <TD WIDTH="100">Station2[0]</TH> </TR> </TABLE> </BODY> </HTML> よろしくお願いします。
- ベストアンサー
- HTML
- 表の作成ができません！（ＨＴＭＬ）
メモ帳にＨＴＭＬ記述でホームページを作っています。 表を作成したいのですが、表示されません。 <html> <head> <title>～</title> </head> <body> <table border=1> <tr> <td>AAA</td> <td> <br>aaaaaaaaaaa <br>bbbbbbbbbbb <br>ccccccccccc </td> </tr> <tr> <td>BBB</td> <td> <br>dddddddddd <br>eeeeeeeeee </td> </tr> </table> </body> </html> で作っています。 （※aaaaaaは、たとえです） 同じタグ記述で、改行のない表を作ったら、これは表示されました。 表内に改行させた場合は、エクスプローラには表示されないのでしょうか？
- 締切済み
- その他（インターネット・Webサービス）
- cssでテーブルの位置を設定するには？
<table border="1" align="left">でテーブルの位置を競ってすることはできたのですが スタイルシートで行いたいです。 そもそも他のテーブルはすべて中央に寄せたいため、 table { margin-left: auto; margin-right: auto; } としています。 そのうえで、任意のテーブルのみ左に寄せて表示したいので table.test { align:left; } としたのですが、うまくいきません。 ---------------------------------------------------------- <html> <head> <title>test</title> <STYLE type="text/css"> table { margin-left: auto; margin-right: auto; width: 40%; } table.test { width: 80%; align:left; } </STYLE> </head> <body> <table border="1"> <tr><th>見出</th><th>見出</th></tr> <tr><td>セル</td><td>セル</td></tr> </table> <br><br><br> <table border="1" align="left"> <tr><th>見出</th><th>見出</th></tr> <tr><td>セル</td><td>セル</td></tr> </table> <br><br><br> <table border="1" class="test"> <tr><th>見出</th><th>見出</th></tr> <tr><td>セル</td><td>セル</td></tr> </table> </body> </html> ----------------------------------------------------- このコードだと、 table.test { width: 80%; align:left; } の、 width: 80%; の部分は認識されるようですが、align:left;は無視されます。 スタイルシートでテーブルの位置を設定する方法をご教授ください。
- 締切済み
- CSS
- テーブルデータのスクロール
いつもお世話になっています。 テーブル作成時に、ヘッダ部分のみを固定し、 データ部分をスクロールしたいと思い、調べた結果 <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>部分を実際にスクロール するサンプルソースがみつからず、ここに質問させていただきました。 ご教授お願いいたします。
- ベストアンサー
- HTML
補足
いろいろやってはみましたが、うまくいきません。 下記のようなプログラム形式なのですがどうでしょうか？ ＜プログラム例＞ --************************************************** -- 内部ヘッダ ************************************************** 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>');