
HTMLおよびJavaScriptに関して教えてください。
現在HTMLにテーブルタグを使用して、5か月分の日割りの表を作成しています。横に日付を設定する必要性から、テーブルの横スクロールを出して1画面で見せています。(かなり長い横スクロールのテーブルです)
このとき、前月、今月、次月、次々月、次々次月と表示することとなり、表の始まりが前月となっています。
要望としては、画面を開いたときに、今月の位置で横スクロールされた状態になっていて欲しいのです。
縦の位置であれば、アンカーを使えば良さそうですが、テーブル内の横スクロールの制御は出来なそうで、、、
以上、よろしくお願いします。
No.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>
steel_grayさん
ありがとうございます。
まさに望んでいたカタチです。
画面はASPで動的に作成しているので、
この方法なら違和感なく追加できます。
お見事です。ありがとうございました。
No.2
- 回答日時:
古文書を絶対値で指定座標へ移動させています
毎月の大きさが同一でしたら変更不要ですが。異なる場合毎月変更が必要ですが
IE5.5以降しか対応していませんが、縦書きで作成した場合は、アンカーは使えますが
参考URL:http://www.htmq.com/js/window_scrollby.shtml
ご回答ありがとうございます。
スクロールの座標指定を行えば、確実に移動可能ですね。
参考にさせていただきます。
ありがとうございました。
No.1
- 回答日時:
onloadで、テーブルの2番目のセルに合わせてスクロールさせる
サンプルです。
(大きなテーブルに各月のテーブルが入れ子で配置されているという前提)
<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が見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- その他(プログラミング・Web制作) webデザインです。 プログラミンでの質問なのですが 手動でpc画面を下にスクロールするとスクロール 1 2022/10/10 22:01
- JavaScript HTML&CSS Javascriptによる動的テーブル 1 2023/03/27 19:51
- Access(アクセス) AccessVBAで降順にするテーブル作成クエリを使用して作成したテーブルを削除し同一のテーブル作成 1 2023/01/06 11:17
- Excel(エクセル) CSVファイルがカンマ区切りにならない。対処法を教えていただきたいです。 仕事でSMS一斉送信ができ 2 2022/07/01 21:24
- Access(アクセス) Accessテーブルの結合で別々のテーブルのフィールドを組み合わせて値を出す方法について 2 2022/07/20 19:43
- Visual Basic(VBA) 【Excel VBA】条件に合った行の表示・非表示を行う方法 3 2023/03/18 12:31
- Windows 10 画面上の[タスクバー]の位置の変更 1 2022/06/12 21:10
- その他(ゲーム) 横スクロールシューティングは完全2Dだけ? 2 2023/04/04 19:39
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
指定のテキストをクリックする...
-
appendChildとinnerHTMLを短く
-
a9のサイトの仕組み
-
外部のデータファイルの読み込...
-
javascriptで画像をテーブルに...
-
javascriptでダブルクオテーシ...
-
画面表示とともに、テーブルの...
-
<JavaScript>tableタグを入力不...
-
フォーム内で記入したクエリ送...
-
ハイパーリンクを別ウインドウ...
-
背景色を変えて未入力チェック...
-
チェックボックスのチェック方法
-
プルダウン 項目が多いので先頭...
-
至急!GetElementById でtdの...
-
iframeの内のTable(rowspan有り...
-
FORMのSELECTのOPTION項目をサ...
-
Javascript ポップアップウィ...
-
同意チェックボックスはひとつ...
-
チェックボックスの値を引き渡...
-
Comfirm応答の後処理
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<JavaScript>tableタグを入力不...
-
selectのonChangeが動作しません
-
javascriptで文字を拡大・縮小...
-
tbody要素のinnerHTMLが書き換...
-
テキストエリアに入力した改行...
-
idの振り直しについて
-
【jQuery】tableループ内のIDの...
-
javascriptで<table>背景色の取得
-
テーブルの行数を可変長にした...
-
javascriptで画像をテーブルに...
-
テーブルのセルのクリック時、...
-
Javascriptでテーブルタグの座...
-
Table内TDの子要素を移動させた...
-
javascriptでクリックするごと...
-
別窓で画像を表示する場合に余...
-
外部のデータファイルの読み込...
-
クリックごとに文字色が交互に...
-
DIVで同一ページ内にポップアッ...
-
innerHTMLでのテーブル作成
-
javascriptで画像の移動
おすすめ情報