画面表示とともに、テーブルの横スクロール位置を指定したい

解決済

質問者：heroherohe
質問日時：2007/06/12 15:15
回答数：3件

HTMLおよびJavaScriptに関して教えてください。

現在HTMLにテーブルタグを使用して、5か月分の日割りの表を作成しています。横に日付を設定する必要性から、テーブルの横スクロールを出して１画面で見せています。（かなり長い横スクロールのテーブルです）

このとき、前月、今月、次月、次々月、次々次月と表示することとなり、表の始まりが前月となっています。
要望としては、画面を開いたときに、今月の位置で横スクロールされた状態になっていて欲しいのです。

縦の位置であれば、アンカーを使えば良さそうですが、テーブル内の横スクロールの制御は出来なそうで、、、

以上、よろしくお願いします。

通報する

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

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： steel_gray
回答日時：2007/06/13 13:54

#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>

- 1
- 件

通報する

この回答へのお礼

steel_grayさん
ありがとうございます。

まさに望んでいたカタチです。
画面はASPで動的に作成しているので、
この方法なら違和感なく追加できます。

お見事です。ありがとうございました。

通報する

お礼日時：2007/06/13 14:19

No.2

回答者： k0021
回答日時：2007/06/13 07:03

古文書を絶対値で指定座標へ移動させています

毎月の大きさが同一でしたら変更不要ですが。異なる場合毎月変更が必要ですが
ＩＥ5.5以降しか対応していませんが、縦書きで作成した場合は、アンカーは使えますが

参考URL：http://www.htmq.com/js/window_scrollby.shtml

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます。

スクロールの座標指定を行えば、確実に移動可能ですね。
参考にさせていただきます。
ありがとうございました。

通報する

お礼日時：2007/06/13 11:04

No.1

回答者： steel_gray
回答日時：2007/06/12 18:35

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>

- 0
- 件

通報する

この回答へのお礼

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>