• 締切済み

TABLEの特定の行にスクロールバーをつけたい

横に5個、縦に100個のテキストボックスを用意し、上下に切ったフレームの下画面に表示させ、入力していくページを作っています。 このテキストボックスを5×100のテーブルにしているのですが、 最初の1行を入力項目名に、下から3行ほどを入力値計算結果にしているため、 間の2~97行だけをスクロールさせたいと考えています。 特定の行だけスクロールバーをつけるということはHTMLでできるのでしょうか。 以下ソースです。 <% dim i i=0 %> <table border=1> <tr> <td width=70 align=center bgcolor="#e6e6fa">A</td> <td width=200 align=center bgcolor="#e6e6fa">B</td> <td align=center bgcolor="#e6e6fa">C</td> <td align=center bgcolor="#e6e6fa">D</td> <td align=center bgcolor="#e6e6fa">E</td> </tr> <% do while i<=99 %> <tr> <td align=center><input type="text" maxlength=6></td> <td align=center><input type="text"></td> <td align=center><input type="text"></td> <td align=center width=40><input type="text"></td> <td align=center width=40><input type="text"></td> </tr> <% i=i+1 loop %> <tr> <td rowspan="3" colspan="3"></td> <td align=center bgcolor="#e6e6fa">結果(1)</td> <td align=center><input type="text"></td> </tr> <tr> <td align=center bgcolor="#e6e6fa">結果(2)</td> <td align=center><input type="text"></td> </tr> <tr> <td align=center bgcolor="#e6e6fa">結果(3)</td> <td align=center><input type="text"></td> </tr> </table> このループ間のテーブル行にスクロールバーをつけたいのです。 長々とすみません。 どなたかご存知の方、お願いします・・・。

  • HTML
  • 回答数2
  • ありがとう数3

みんなの回答

  • misoka
  • ベストアンサー率35% (56/160)
回答No.2

スタイルシートとか使って平気な状況でしたら、 入力部分のテーブルをレイアとかに入れてしまう という方法もありかもしれません...? overflow-y: scroll を指定する、なんて方法で。 この場合、入力部分と計算結果のテーブルを別のテーブルに する必要があるかもしれませんが。 なお、スタイルシートなどについては、 「とほほ」さんのページなどを参考にどうぞ。

参考URL:
http://www.tohoho.wakusei.ne.jp/
lovelypooh
質問者

お礼

ありがとうございます。 スタイルシートは詳しくありませんが、やってみます。 参考URLまでつけていただいて・・・。 また機会があればいろいろ教えてやってください(ペコリ)。

  • xruz
  • ベストアンサー率50% (72/143)
回答No.1

小手先の技ですが上、中(loopの部分)、下の部分をフレーム分割するしかないと思います。

lovelypooh
質問者

お礼

私もそれを考えていたのですが、データの受け渡しの関係をややこしくしないために 今回はすべてを同じ画面で表示しなければならないのです・・・。 早速の回答ありがとうございました(ペコリ)。

関連するQ&A

  • Javascript web テーブルにカーソルを載せると、説明文を表示するプログラム

    タイトルの通りのプログラムを作ったのですが、ファイルを開いた時から説明文が表示されてしまいます。開いた時に表示されなくするには、どのようにすればよいのでしょうか? ソースは↓になります。よろしくお願いいたします。 <html> <head> <script type="text/javascript"> <!-- function display_INIT() { document.getElementById('discript01').style.display='none'; } function display_ON(itm) { if(itm == 1) { document.getElementById('discript01').style.display='block'; } } function display_OFF(itm) { if(itm == 1) { document.getElementById('discript01').style.display='none'; } } // --> </script> </head> <table> <tr onmouseover="display_ON(1)" onmouseout="display_OFF(1)"> <td width="16%" align="center" bgcolor="EBEBEB" nowrap>test </td> <td width="16%" align="center" bgcolor="#EBEBEB"> <input type="radio"> </td> <td width="17%" align="center" bgcolor="#EBEBEB"> <input type="radio"> </td> <td width="17%" align="center" bgcolor="#EBEBEB"> <input type="radio"> </td> <td width="17%" align="center" bgcolor="#EBEBEB"> <input type="radio"> </td> <td width="17%" align="center" bgcolor="#EBEBEB"> <input type="radio"> </td> </tr> <tr id="discript01"> <td colspan="6">(只今テスト中) </td> </tr> </table> </html>

  • htmlでインプットボックスを横並びに表示したい。

    ホームページを作成しておりますが、tdの中にinput type="text"にてテキストボックスを4つ作成したいと考えております。 こちらで拝見いたしましたチェックボックスの右側に文字を表示される方法をご参考にさせていただき、下記を作成しましたが、縦並びになってしまいます。 何とかして縦2×横2に置き換えることはできないでしょうか? ブラウザはIE11を使用しており、コードはVisualStudioCodeを使用しております。 <div style="top : 161px;left : 8px; position : absolute; z-index : 4; width : 847px; height : 252px; " id="Layer5"> <div style="background: white; padding: 10px; margin-bottom: 10px; border: 1px solid #333333"> <table border="1" height="252" width="818"> <tr bgcolor="gray" style="color:white" height="50"> <th height="42" width="92"><b>列1</b></th> <th height="42" width="212">列2・列3<br>列4・列5</th> <th height="42" width="137">列7/列8</th> <th height="42" width="189"><b>列9/列10</b></th> </tr> <tr bgcolor="lightyellow"> <td align="center" height="47" width="92"> <input type="text" name=列1 style="background:white; color:#000000;" align="middle" value="83行目"> </td> <td align="center" height="47" width="312"> <input type="text" name=列2 style="background:white; color:#000000;" align="middle" value="86行目"> <input type="text" name=列3 style="background:white; color:#000000;" align="middle" value="87行目"> <input type="text" name=列4 style="background:white; color:#000000;" align="middle" value="88行目"> <input type="text" name=列5 style="background:white; color:#000000;" align="middle" value="89行目"> </td> <td align="center" height="47" width="137"><input type="text" name=列7 style="background:white; color:#000000;" align="middle" value="92行目"> <span> <input type="text" name=列8 style="background:white; color:#000000;" align="middle" value="93行目"> </span> </td> </div> <td align="center" height="47" width="189"><input type="text" name=列9 style="background:white; color:#000000;" align="middle" value="96行目"> <input type="text" name=列0 style="background:white; color:#000000;" align="middle" value="97行目"> </td> </tr> <tr> <td align="center" height="47" width="92"></td> <td align="center" height="47" width="212"></td> <td align="center" height="47" width="137"></td> <td align="center" height="47" width="189"></td> </tr> </table> </div> </div> 【上記で表示させた場合】 ーーーーー|  86行目  |ーーーーー| ーーーーー|  87行目  |ーーーーー|  96行目  83行目  |  88行目  |  92行目|  97行目 ーーーーー|  89行目  |ーーーーー| 【やりたいこと】 ーーーーー|ーーーーーーーーーー|ーーーーー| ーーーーー|  86行目|87行目 |ーーーーー|  96行目  83行目  |  88行目|89行目 | 92行目 |  97行目 ーーーーー|ーーーーーーーーーー|ーーーーー|

  • テーブルのスクロールバーについて

    HP作成初心者です。dreamweaver cs4を使っています。教えていただきたいのですが、テーブルの右の方にスクロールバーを取り付けたいのですが、そのやり方がわからず困ってます・・・ どなたか教えていただけないでしょうか? <table width="500" height="150" border="1" align="center" cellpadding="0" cellspacing="0"> <tr> <td>&nbsp;</td> </tr> </table> このようなソースなんですが、お手数かけますが、ご教授お願いします。

  • テーブルのスクロールバーについて

    HP作成初心者です。dreamweaver cs4を使っています。教えていただきたいのですが、テーブルの右の方にスクロールバーを取り付けたいのですが、そのやり方がわからず困ってます・・・ どなたか教えていただけないでしょうか?<table width="500" height="150" border="1" align="center" cellpadding="0" cellspacing="0"> <tr> <td>&nbsp;</td> </tr> </table> このようなソースなんですが、どこに挿入したらいいんでしょうか? お手数かけますが、ご教授お願いします。

  • 1ページにテーブルを複数設定・一括変更の方法について

    一つのページに複数(十数個)を設置する場合 まとめて設置する方法はあるのでしょうか? また、サイズ等を変更したい場合も 一括して変更する方法はあるのでしょうか? 例えば、以下の物を数十個設置する場合 設置自体は簡単なのですが、変更が・・、 どうにか簡単にできる方法があればご教授下さい。 <center> <table border="0" width="600" cellspacing="1" bgcolor="#0fb1ff" height="200"> <tbody> <tr> <td colspan="2" width="600" bgcolor="#ffffff" height="20" align="center"></td> </tr> <tr> <td width="200" bgcolor="#ffffff" height="100" align="center"></td> <td width="400" bgcolor="#ffffff" height="100"></td> </tr> <tr> <td width="200" bgcolor="#ffffff" height="20" align="center"></td> <td width="400" bgcolor="#ffffff" height="20"></td> </tr> <tr> <td width="200" bgcolor="#ffffff" height="20" align="center"></td> <td width="400" bgcolor="#ffffff" height="20"></td> </tr> <tr> <td width="200" height="20" bgcolor="#ffffff" align="center"></td> <td width="400" height="20" bgcolor="#ffffff"></td> </tr> <tr> <td width="200" bgcolor="#ffffff" height="20" align="center"></td> <td width="400" bgcolor="#ffffff" height="20"></td> </tr> </tbody> </table> </center> 宜しくお願いします。

    • ベストアンサー
    • HTML
  • safariで特定条件下でデーブル幅が効かなくなります

    safariでcolspanでセルを結合し、その中に大きい要素(下の例ですとwidth500pxの画像や、文字数60のテキスト領域)を入れると、他の行の幅が変わってしまいます。 スタイルシートでtd幅を指定してやったりしてみたのですが、どうしても幅が変わってしまいます。 何か解決方法等ございましたら、ご教授願います。 <table width="600" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="20%" align="center" bgcolor="#99FFFF">20%</td> <td width="80%" align="center">80%</td> </tr> <tr> <td colspan="2" align="center" bgcolor="#FFCCCC"><img src="http://cmm001.goo.ne.jp/img/sn/sn_50.gif" width="500" height="24"></td> </tr> </table> <br> <table width="600" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="20%" align="center" bgcolor="#99FFFF">20%</td> <td width="80%" align="center">80%</td> </tr> <tr> <td colspan="2" align="center" bgcolor="#FFCCCC"><form name="form1" method="post" action=""> <textarea name="textarea" cols="60"></textarea> </form> </td> </tr> </table> <br> <table width="600" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="20%" align="center" bgcolor="#99FFFF">20%</td> <td width="80%" align="center">80%</td> </tr> <tr> <td colspan="2" align="center" bgcolor="#FFCCCC">&nbsp;</td> </tr> </table>

    • ベストアンサー
    • HTML
  • テーブル内のスクロール

    初めて質問いたします。 HTML構文をきちんと理解しないまま、サイトをつくってしまっていますが、ひとつ困っていることがあります。テーブルの中のひとつのセルの高さサイズを固定してその中につくったテーブルを縦にスクロールさせています。winではうまく表示できるのですが、mac環境の人からスクロールしないと言われました。ブラウザはIE5と聞いています。以下のような構文にしていますが、なにか間違えているのでしょうか?どなたか教えていただけると助かります。よろしくお願いいたします。 <table width="620" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF"height="500"> <tr> <td height="60" valign="top"> </td> </tr> <tr> <td> <div align="center"> <div style="height:400px;width:600px;overflow-y:scroll;"> <table width="600" border="0" cellspacing="0" cellpadding="0"> </table> </div> </div> </td> </tr> </table>

    • ベストアンサー
    • HTML
  • tableに対するdiv

    テーブル内の文字色を白にしたい場合、 <style type="text/css"><!-- div.font{color:white;} --></style> <tr> <div class="font"> <td align="center" width="20%">★1</td> <td align="center" width="20%">★2</td> <td align="center" width="20%">★3</td> <td align="center" width="20%">★4</td> <td align="center" width="20%">★5</td> </div> </tr> このように指定しましたが、適用されません。 なぜでしょう?

    • ベストアンサー
    • HTML
  • テーブルの枠線が消えません。

    テーブルの枠線が消えません。 HTMLでテーブルを作成しています。 以下のようなHTMLなのですが、 先頭行の8と9の間や二行目の15と30の間に縦線が入ってしまいます。 これを表示させたくないのですが、よく見ると一番右側の項目は全て縦線が入っています。 これを消すことはできるでようか? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-31j"> </head> <body> <table> <tr bgcolor="blue"> <td colspan="60" align="center">8</td> <td colspan="60" align="center">9</td> <td colspan="60" align="center">10</td> </tr> <tr bgcolor="lightblue"> <td colspan="15" align="right">15</td> <td colspan="15" align="right">30</td> <td colspan="15" align="right">45</td> <td colspan="15" align="right">60</td> <td colspan="15" align="right">15</td> <td colspan="15" align="right">30</td> <td colspan="15" align="right">45</td> <td colspan="15" align="right">60</td> <td colspan="15" align="right">15</td> <td colspan="15" align="right">30</td> <td colspan="15" align="right">45</td> <td colspan="15" align="right">60</td> </tr> <tr align="center"> <td colspan="60" bgcolor="lightpink" height="40">仕事</td> <td colspan="60" bgcolor="lightgreen">休み</td> <td colspan="60" bgcolor="lightpink">仕事</td> </tr> <tr align="center"> <td colspan="80" bgcolor="lightgreen" height="40">休み</td> <td colspan="40" bgcolor="lightblue">仕事</td> <td colspan="60" bgcolor="lightgreen">休み</td> </tr> <tr align="center"> <td colspan="50" bgcolor="lightgreen" height="40">休み</td> <td colspan="60" bgcolor="lightpink">仕事</td> <td colspan="70" bgcolor="lightgreen">休み</td> </tr> </table> </body> </html>

    • ベストアンサー
    • HTML
  • テーブルの中にメールフォームを設置するには・・・

    現在、ホームページビルダー2001を使用していて、 テーブルの中にメールフォームをつけようとしているのですが、 フォームのタグは何処にいれたらいいのかわからなくて困っています。 プロバイダーはOCNでそちらのサポートページを見たら <FORM METHOD="post" ACTION="/cgi-bin/formmail.pl"> <INPUT TYPE="hidden" NAME="recipient" VALUE="???@???.ocn.ne.jp"> を1、2行目にいれるとあったのですが・・・ テーブルのタグは </table> <br> <CENTER> <table align="center" border=0> <tr> <td bgcolor="steelblue"> <table align="center" cellspacing=0 cellpadding=2 border=0> <tr> <TD bgcolor="aliceblue" align="center"><br> <table align="center"> <tr> <td>名前(ハンドル名可)</td> <td><input type="text">(全角)</td> </tr> </table> <br> <table align="center"> <tr> <td><input type="button" value="送信する"></td> </tr> </table> </TD> </tr> </table> </td> </tr> </table> </CENTER> <br> </BODY> </HTML> です(途中項目省略してます)が、これの何処に入れればいいのでしょうか。 また、試しにアップして、フォームに入力しようとしたら、英数半角しか 入力できないようになっていました(汗) これも、ダグに問題があるのでしょうか。

    • ベストアンサー
    • HTML

専門家に質問してみよう