- PR -

tableタグのウィンドウ枠の固定

1
投稿者投稿内容
DDT
会議室デビュー日: 2006/01/24
投稿数: 2
投稿日時: 2006-01-24 20:01
いつもお世話になっております。

過去ログの「DataGridのウィンドウ枠の固定」の

http://www.microsoft.com/spanish/msdn/comunidad/mtj.net/voices/art141.asp

を参考にして
tableタグで同じような事をしてみたのですが、どうしても上手くいきません。
どなたか実現方法を知っている方はいないでしょうか？

また、この内容も気になるのですがリンク切れみたいです。
どなたか知っている方はいないでしょうか？

http://ptvi.hp.infoseek.co.jp/mi/dhtml_00002.html

以上よろしくお願いいたします。
かるあ
ぬし
会議室デビュー日: 2003/11/16
投稿数: 1190
お住まい・勤務地: センガワ→ムサシノ
投稿日時: 2006-01-24 20:19
こちらの環境では IE6, Firefox ともに表示されました。
どんなHTMLになりましたか？
mio
ぬし
会議室デビュー日: 2005/08/25
投稿数: 734
お住まい・勤務地: 神奈川県
投稿日時: 2006-01-24 20:20
見えないテーブルで行を2つ作って、1行目のセルにヘッダだけ、
２行目のセルに<div style="overflow:scroll;width:xxxpx">を入れて、その中にレコードのテーブルを入れればいいんじゃないでしょうか。
外のテーブルは細々スタイルを指定してあげる必要がありますが。
DDT
会議室デビュー日: 2006/01/24
投稿数: 2
投稿日時: 2006-01-25 09:40
返信ありがとうございます。

>かるあ様
逆に表示されているものはどういったHTMLになるのでしょうか？

>mio様
見えないテーブルとはどういったものでしょうか？

以上よろしくお願いいたします。
mio
ぬし
会議室デビュー日: 2005/08/25
投稿数: 734
お住まい・勤務地: 神奈川県
投稿日時: 2006-01-25 10:29
tableタグにborderを入れず、border-collapseをcollapseにして、tdのpaddingもないものです。
要するにtd内以外は描画される要素を持たないテーブル、というだけです。
かるあ
ぬし
会議室デビュー日: 2003/11/16
投稿数: 1190
お住まい・勤務地: センガワ→ムサシノ
投稿日時: 2006-01-25 13:19
単にHTMLだけでしたらこんな感じに読みかえれるのかな
コード:
            <div style="OVERFLOW: hidden; WIDTH: 400px">
                <table rules="cols" style="POSITION:relative">
                <tr><td style="width:80px;">No</td>
                    <td style="width:500px;">Time</td>
                </table>
            </div>
            <div id=divScroll 
                 onscroll="document.getElementById('DataGrid2').style.pixelLeft=divScroll.scrollLeft*-1;" 
                 style="OVERFLOW:auto;WIDTH:400px;HEIGHT:201px">
                <table rules="cols" id="DataGrid2">
                <tr><td style="width: 80px;">0</td>
                    <td style="width:500px;">2006/01/25 11:06:53</td></tr>
                <tr><td>1</td><td>2006/01/25 11:06:53</td></tr>
                <tr><td>2</td><td>2006/01/25 11:06:53</td></tr>
                <tr><td>3</td><td>2006/01/25 11:06:53</td></tr>
                <tr><td>4</td><td>2006/01/25 11:06:53</td></tr>
                <tr><td>5</td><td>2006/01/25 11:06:53</td></tr>
                <tr><td>6</td><td>2006/01/25 11:06:53</td></tr>
                <tr><td>7</td><td>2006/01/25 11:06:53</td></tr>
                <tr><td>8</td><td>2006/01/25 11:06:53</td></tr>
                <tr><td>9</td><td>2006/01/25 11:06:53</td></tr>
                <tr><td>10</td><td>2006/01/25 11:06:53</td></tr>
                </table>
            </div>


リンク先にあったサンプルでは
ヘッダ用とデータスクロール用のデータグリッドを用意して
ヘッダ側のデータを非表示にしているようですね

＃ZOOM: 1% がうまく聞かなかったので display:none で代替しています。
1

スキルアップ／キャリアアップ（JOB@IT）