- ベストアンサー
画面表示とともに、テーブルの横スクロール位置を指定したい
HTMLおよびJavaScriptに関して教えてください。 現在HTMLにテーブルタグを使用して、5か月分の日割りの表を作成しています。横に日付を設定する必要性から、テーブルの横スクロールを出して１画面で見せています。（かなり長い横スクロールのテーブルです） このとき、前月、今月、次月、次々月、次々次月と表示することとなり、表の始まりが前月となっています。 要望としては、画面を開いたときに、今月の位置で横スクロールされた状態になっていて欲しいのです。 縦の位置であれば、アンカーを使えば良さそうですが、テーブル内の横スクロールの制御は出来なそうで、、、 以上、よろしくお願いします。
- heroherohe
- お礼率85% (6/7)
- JavaScript
- 回答数3
- ありがとう数6
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
#1です。 こんな感じでしょうか？ <html> <head> <title></title> <script type="text/javascript"> function table_scroll() { var L = document.getElementById('LAYER'); var T = L.getElementsByTagName('table')[0]; L.scrollLeft = T.offsetLeft + T.rows[0].cells[1].offsetLeft; } </script> </head> <style type="text/css"> table{border:solid thin #ccc} </style> <body onload="table_scroll()"> <div style="overflow:scroll;width:500px;position:relative;" id="LAYER"> <table><tr> <td><table width="600"><tr><th>先月</th></tr></table></td> <td><table width="600"><tr><th>今月</th></tr></table></td> <td><table width="600"><tr><th>来月</th></tr></table></td> </tr></table> </div> </body> </html>
その他の回答 (2)
- k0021
- ベストアンサー率26% (32/120)
古文書を絶対値で指定座標へ移動させています 毎月の大きさが同一でしたら変更不要ですが。異なる場合毎月変更が必要ですが ＩＥ5.5以降しか対応していませんが、縦書きで作成した場合は、アンカーは使えますが
お礼
ご回答ありがとうございます。 スクロールの座標指定を行えば、確実に移動可能ですね。 参考にさせていただきます。 ありがとうございました。
- steel_gray
- ベストアンサー率66% (1052/1578)
onloadで、テーブルの２番目のセルに合わせてスクロールさせる サンプルです。 （大きなテーブルに各月のテーブルが入れ子で配置されているという前提） <html> <head> <title></title> <script type="text/javascript"> function table_scroll() { var T = document.getElementById('TBL'); document.body.scrollLeft = T.offsetLeft + T.rows[0].cells[1].offsetLeft; } </script> </head> <style type="text/css"> table{border:solid thin #ccc} </style> <body onload="table_scroll()"> <table id="TBL"><tr> <td><table width="600"><tr><th>先月</th></tr></table></td> <td><table width="600"><tr><th>今月</th></tr></table></td> <td><table width="600"><tr><th>来月</th></tr></table></td> </tr></table> </body> </html>
お礼
steel_grayさん ご回答ありがとうございました。 イメージはサンプルの通りなのですが、 これにスクロールバーを追加すると、 うまく動作しないようです。 以下のように<div>を入れるとダメなのでしょうか？ 申し訳ありませんが、アドバイスがあればお願いします。 <div style="overflow:scroll;width:500px;"> <table id="TBL"><tr> <td><table width="500"><tr><th>先月</th></tr></table></td> <td><table width="500"><tr><th>今月</th></tr></table></td> <td><table width="500"><tr><th>来月</th></tr></table></td> </tr></table> </div>
関連するQ&A
- 画面表示とともにtableの指定の行位置を表示
htmlの一部に 高さ指定（150px程度）のtableを作成し、 見出しは固定で、 内容は縦スクロールによって、見られるようにしている情報があります。 内容は月毎の予定のような情報になります。 これをこのhtmlを表示すると同時に JavaScriptで本日の日付（月）を取得し、該当の「月」の行に移動させたいのです。 tableの上に、1月、2月、3月、4月・・・とアンカー指定でジャンプできるように設定し 該当月をクリックすればその月の行にジャンプすることはできています。 これを、クリックしないで 「今月」の位置にジャンプさせて表示したいのです。 なかなかうまくいきません。 どなたか、アドバイスをお願いします。
- ベストアンサー
- JavaScript
- テーブルを横に並べたい
お世話になります。HTML初心者で、入門書を見ながらHPを作っています。 テーブルを2つ横に並べたいのですが、 まず画面左に適当な表（表１）を作りました。そして、表１の右に見た目で3cm程間をあけて、同じ表を作りたいのですが、どういうタグを打てばいいのでしょうか。 よろしくお願いします。
- ベストアンサー
- HTML
- tableの横の位置を変えるには？？
<div> <table> <tr><td>あ</td><td>い</td></tr> <tr><td>う</td><td>え</td></tr> </table> </div> が仮にあったとして、これを外部ＣＳＳファイルでどこかのタグに text-align:center を適用させ、テーブルの位置を真ん中にさせたい（表のような使い方です）んですが、自分でやってみたら、divとtableにＩＤとclassで両方試して適用させましたができませんでした。 この表の横の位置をブロックとしてとらえて移動させることはできる でしょうか？？
- ベストアンサー
- HTML
- HTMLでテーブルを表示させようとしています。
HTMLでテーブルを表示させようとしています。 画像のような勤務状況がわかるテーブルをHTMLで表示させようとしています。 テーブルの数字項目は時刻を表しています。(9から18まであります) ブラウザの横スクロールは表示させたくないので テーブル内の一部項目(「No.」から「氏名」まで)を固定にして 横スクロールバーを表示させたいのです。 縦スクロールのサンプルを見つけ、 これを横に対応させればよいかと思ったのですが うまく表示させることが出来ませんでした。 一部項目を固定にして横スクロールバーを表示することは可能なのでしょうか？
- ベストアンサー
- HTML
- スクロールバーが表示される位置を変更したい。
初めてこちらを利用します。 宜しくお願い致します。 Macromedia Dreamweaver MXを使用しています。 テーブルの中に画像を一つ追加したことによって、横スクロールバーが出現するタイミングが変わってしまいました（ウィンドゥをドラッグで縮めた場合、少ししか縮めていないのに横スクロールバーが出現します）。 テーブル幅は１００％設定にしていますが、これを変更せずにスクロールバーの出現する位置を変えることは可能でしょうか？ ご存知の方がいらっしゃいましたら、どうぞ宜しくお願い致します。
- 締切済み
- ホームページ作成ソフト
- 横スクロールバーが表示されてしまう
ホームページを作成中なのですが、横幅の余白はあるのにのに横スクロールバーまで表示されてしまいます。 フレームを使用していて、そこにTABLEタグを入れるとどうやら必ず表示されるみたいです。html{overflow:hidden;}のタグを入れていますが、それでもだめみたいです。TABLEなしにすると横スクロールバーは表示されないのですが、デザイン上TABLEは使いたいのでカットは無理です。 解決方法が分かりません。どなたがアドバイスよろしくお願いします。HTML初心者なのでできれば分かりやすい説明をお願いします。 ちなみに使用しているブラウザはIE6です。
- 締切済み
- HTML
- テーブルにスクロールバーをつける
テーブルにスクロールバーをつけることは出来るでしょうか。 行数は画面に表示させておくのが５行くらいで、５行以降はスクロールバーで移動させ表示させると言う感じにしたいのです。 HTMLで出来なければ他の方法も教えて下さい。
- ベストアンサー
- HTML
- スマホの横スクロール画像
料金表のテーブルですが スマホでみると横スクロールになり 横スクロールを示す画像が出てきます。 これ！わりやすくて便利だなぁと思いまして、自分のサイトにもつけたいです。 ただ、やり方がわからず、どうやって表示させているのか お判りになりましたら教えてほしいです。 こちらのサイトを見ています。 tengokutobira.jp/plan/ よろしくお願い申し上げます。
- ベストアンサー
- CSS
- html+CSSでテーブルのスクロール（位置固定）
助けてください。 たとえば、１０項目の列を持つテーブルがあったとします。 レコード件数は１００件だとします。 画面に表示できるのは５項目、１０件だとした場合、 そのテーブルに対して縦横スクロールバーを つけるのですが、その際に縦スクロールバーを下に動かした場合、 <th>列名だけはスクロールさせず、レコード部のみスクロールさせたいです。 また、横スクロールバーを右に動かした場合、５項目は固定で６項目目以降をスクロールさせたいです ※エクセルのウインドウ枠の固定 を適用したイメージ htmlとスタイルシートで実現できますでしょうか？
- ベストアンサー
- CSS
- テーブルの位置設定・・・ＨＴＭＬで作成
ホームページをＨＴＭＬで作成中です。 テーブルで表を作成しているのですが・・・。 テーブルを表示する微妙な位置設定はどうしたらいいでしょうか？ align="center"などではなく、微妙な位置設定ができる方法を教えてください。 よろしくお願いします
- ベストアンサー
- CSS
お礼
steel_grayさん ありがとうございます。 まさに望んでいたカタチです。 画面はASPで動的に作成しているので、 この方法なら違和感なく追加できます。 お見事です。ありがとうございました。