JWorld@TW the best professional Java site in Taiwan
      註冊 | 登入 | 全文檢索 | 排行榜  

» JWorld@TW » Web Design 版  

按列印兼容模式列印這個話題 列印話題    把這個話題寄給朋友 寄給朋友    訂閱主題
reply to topicthreaded modego to previous topicgo to next topic
本主題所含的標籤
無標籤
作者 HTML的Table沒有方便的方法可以作ScrollBar嗎? [精華]
老陳





發文: 161
積分: 2
於 2004-09-29 13:22 user profilesend a private message to userreply to postreply to postsearch all posts byselect and copy to clipboard. 
ie only, sorry for netscape users:-)add this post to my favorite list
我覺得HTML的UI跟Java Swing最大的差別在Table,尤其是ScrollBar,HTML的<div>雖然可以設定 overflow的style出現ScrollBar,但是卻沒有辦法作到以下兩點:

1. 拉動垂直ScrollBar時,讓Header固定只拉動Body
2. 拉動水平ScrollBar時,讓Header可以跟Body連動

之前是有一篇討論:
http://www.javaworld.com.tw/jute/post/view?bid=34&id=24279&tpg=1&ppg=1&sty=1&age=0#24279

jini大大提供的http://www.activeui.net/也的確可以做到,但是只能用在IE,mozilla的話雖然可以設定overflow,但是只解決[1]的問題,[2]還是無法解決

真奇怪,為什麼IE的會比較不好用呢?照理說應該不會的Dead

請問各位這種問題都是怎麼處理的呢? Confused


reply to postreply to post
電腦是害人的工具,但是上帝卻可以藉著它行奇妙的大能
作者 Re:HTML的Table沒有方便的方法可以作ScrollBar嗎? [Re:老陳]
老陳





發文: 161
積分: 2
於 2004-11-29 18:20 user profilesend a private message to userreply to postreply to postsearch all posts byselect and copy to clipboard. 
ie only, sorry for netscape users:-)add this post to my favorite list
過了這麼久,看到沒有人回應我的問題,我想大概是我問的不好關係,真是不好意思 xx(

不過,我剛剛看到一篇文章,專門在解這個問題,不但可以解決,更是可以輕易的作到固定住前面幾個column,只讓水平捲軸拉動後面幾個column的高難度技巧喔
而且重點是,針對IE所設計的解決方案,真是太棒啦,解決了困擾我以久的問題 ^^

原文出處
以下是內容:

看到一篇文章,用css實現鎖定HTML Table表頭和第一列,曾見過不少網友為鎖定DataGrid的表頭而傷腦筋,找到的很多實現方法都不盡如人意(最主要的問題就是表頭行中的列和表格其它行中的列的錯位),而這篇文章介紹的實現方法卻非常完美地解決了這個問題,而且還可以象Excel一樣鎖定表格的第一列...


為了避免文章過長,大家瀏覽不方便,所以我把html和css當成附加檔案供大家下載
這裡只提出重點部份

test.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
...
<link rel="stylesheet" href="test.css" type="text/css">
 
<script type="text/javascript">
function lockCol(tblID) {
 
 var table = document.getElementById(tblID);
 var button = document.getElementById('toggle');
 var cTR = table.getElementsByTagName('TR');  //collection of rows
 
 if (table.rows[0].cells[0].className == '') {
  for (i = 0; i < cTR.length; i++)
   {
   var tr = cTR.item(i);
   tr.cells[0].className = 'locked'
   }
  button.innerText = "Unlock First Column";
  }
  else {
  for (i = 0; i < cTR.length; i++)
   {
   var tr = cTR.item(i);
   tr.cells[0].className = ''
   }
  button.innerText = "Lock First Column";
  }
}
</script>
 
<button onClick="lockCol('tbl')"  id="toggle">Lock First Column</button>
 
<div id="tbl-container">
 
<table id="tbl">
<thead>
...
</thead>
 
<tbody>
...
</tbody>
</table>
 
<div>


test.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
...
div#tbl-container {
width: 418px;
height: 252px;
overflow: auto;
}
 
table {
table-layout: fixed;
border-collapse: collapse;
}
 
div#tbl-container table th {
width: 100px;
}
 
thead th, thead th.locked {
font-weight: bold;
text-align: center;
color: white;
border-right: 1px solid silver;
position:relative;
cursor: default;
}
 
thead th {
top: expression(document.getElementById("tbl-container").scrollTop-2); /*IE5+ only*/
z-index: 20;
}
 
thead th.locked {z-index: 30;}
 
td.locked,  th.locked{
border-right: 1px solid silver;
left: expression(document.getElementById("tbl-container").scrollLeft); /*IE5+ only*/
position: relative;
z-index: 10;
}
 
td {
padding: 2px 5px 2px 2px;
font-size: 12px;
border-left: 1px solid silver;
border-bottom: 1px solid silver;
}
...


總之,一句話,我實在太高興了,不知道各位覺得如何?

test.zip (2.78k)


reply to postreply to post
電腦是害人的工具,但是上帝卻可以藉著它行奇妙的大能
作者 Re:HTML的Table沒有方便的方法可以作ScrollBar嗎? [Re:老陳]
yenann

平凡上班族



發文: 105
積分: 1
於 2004-11-30 11:55 user profilesend a private message to userreply to postreply to postsearch all posts byselect and copy to clipboard. 
ie only, sorry for netscape users:-)add this post to my favorite list
For IE 5.0up only?

請問有無更能泛用的方式??


reply to postreply to post
yen.IMAGING 我的幻想~
作者 Re:HTML的Table沒有方便的方法可以作ScrollBar嗎? [Re:老陳]
老陳





發文: 161
積分: 2
於 2004-11-30 13:10 user profilesend a private message to userreply to postreply to postsearch all posts byselect and copy to clipboard. 
ie only, sorry for netscape users:-)add this post to my favorite list
IE5 only的意思是說那個語法只適用ie5,但是在ie6有另外的語法代替. (我猜)

因為我是用IE6.0 SP2測試的,一切OK! Big Smile


reply to postreply to post
電腦是害人的工具,但是上帝卻可以藉著它行奇妙的大能
作者 Re:HTML的Table沒有方便的方法可以作ScrollBar嗎? [Re:老陳]
jackysee





發文: 36
積分: 0
於 2004-11-30 15:13 user profilesend a private message to userreply to postreply to postsearch all posts byselect and copy to clipboard. 
ie only, sorry for netscape users:-)add this post to my favorite list
If you use Mozilla, they already support to use max-height and overflow style in <tbody> tag. All you need is just to set them.

Read Here: http://www.brainjar.com/dhtml/tablesort/


reply to postreply to post
EVA Zone http://evazone.seezone.net
Section 9 http://section9.seezone.net
Jacky's BLOG http://jacky.seezone.net
作者 Re:HTML的Table沒有方便的方法可以作ScrollBar嗎? [Re:老陳]
老陳





發文: 161
積分: 2
於 2004-11-30 15:49 user profilesend a private message to userreply to postreply to postsearch all posts byselect and copy to clipboard. 
ie only, sorry for netscape users:-)add this post to my favorite list
恩,這個方式我知道,mozilla透過css的確是可以很方便的固定住Header,只拉動垂直捲軸Row Data,但是在水平捲軸上面,就沒有辦法讓Header和Row連動了,你看那個範例就知道 Smile

reply to postreply to post
電腦是害人的工具,但是上帝卻可以藉著它行奇妙的大能
作者 Re:HTML的Table沒有方便的方法可以作ScrollBar嗎? [Re:老陳]
geyser





發文: 74
積分: 1
於 2004-12-14 22:37 user profilesend a private message to userreply to postreply to postsearch all posts byselect and copy to clipboard. 
ie only, sorry for netscape users:-)add this post to my favorite list
謝謝老陳兄無私的分享.

小弟打算就用這個好用的css.
運用在我最近要開發的網頁應用程式上.
謝謝啦.


reply to postreply to post
作者 Re:HTML的Table沒有方便的方法可以作ScrollBar嗎? [Re:geyser]
老陳





發文: 161
積分: 2
於 2004-12-24 00:36 user profilesend a private message to userreply to postreply to postsearch all posts byselect and copy to clipboard. 
ie only, sorry for netscape users:-)add this post to my favorite list
geyser兄用得如何啦!要不要來分享一下 ? Big Smile

再推薦一個更炫的功能,一樣只用css就搞定了
就是讓User按住滑鼠左鍵就可移動Table Column的順序喔,就跟JTable一樣
http://web.tampabay.rr.com/bmerkey/examples/move-lock-col.html

其實跟前一篇ScrollBar都一樣出自於同一個網站,這個我就不把Code貼出來了,相信大家只要連進去用用看,再對照Code,就會嚇一大跳喔Tongue

M$雖然都不照標準來,不像Mozilla或是其他Browser一樣,什麼東西都自己作,但是有些功能確是強的叫人不得不佩服(雖然我也是Java愛好者) Big Smile


reply to postreply to post
電腦是害人的工具,但是上帝卻可以藉著它行奇妙的大能
作者 Re:HTML的Table沒有方便的方法可以作ScrollBar嗎? [Re:老陳]
geyser





發文: 74
積分: 1
於 2004-12-25 11:38 user profilesend a private message to userreply to postreply to postsearch all posts byselect and copy to clipboard. 
ie only, sorry for netscape users:-)add this post to my favorite list
老陳兄...
小弟用的滿意極了..我打算要把他放到日後我寫的網頁程式上了.
我想應該會讓很多人驚豔不已吧.

看了你所提供的這些文章.
我開始覺得..其實css真的很重要說......以前寫jsp或cgi時.都覺得最難的是如
何用javascript來控制,一直覺得css只是美工需要懂的.
現在我的觀念完全改觀了............
打算好好的研究一下css.
相信配上javascript.會讓我的網頁程式更為的生動活潑..

謝謝啦...陳兄..


reply to postreply to post
作者 Re:HTML的Table沒有方便的方法可以作ScrollBar嗎? [Re:老陳]
scoop





發文: 3
積分: 0
於 2005-01-10 16:22 user profilesend a private message to userreply to postreply to postsearch all posts byselect and copy to clipboard. 
ie only, sorry for netscape users:-)add this post to my favorite list
請問一下 欄寬可以自行設定嗎?
我看了一下程式 欄寬似乎由 <th> 決定,
有沒有辦法可以讓每一個欄位的寬度都不一樣??


reply to postreply to post
作者 Re:HTML的Table沒有方便的方法可以作ScrollBar嗎? [Re:老陳]
tigerobj





發文: 26
積分: 0
於 2005-02-25 15:08 user profilesend a private message to userreply to postreply to postsearch all posts byselect and copy to clipboard. 
ie only, sorry for netscape users:-)add this post to my favorite list

M$雖然都不照標準來,不像Mozilla或是其他Browser一樣,什麼東西都自己作,但是有些功能確是強的叫人不得不佩服(雖然我也是Java愛好者) Big Smile

那個作法真的不是很好
用expression在w3c根本就驗證不過,是IE自已搞的,作用在css內可用javascript而已
那個方法跟寫在div的onscroll的事件是一樣的.
不算是正規的css,css本來就無法動態計算位置.
另外如果用這個那Mozilla根本就不能用
說穿了還是得靠javascript來作這些動作.
另外我在猜為什用expression那是因為 ie6不支援 position:fixed的原故吧
使用一大堆非正規的東西,讓人真的很火大.如果都用w3c規範的.
也能讓我們減少測試 除錯.


reply to postreply to post
作者 Re:HTML的Table沒有方便的方法可以作ScrollBar嗎? [Re:scoop]
tigerobj





發文: 26
積分: 0
於 2005-02-25 15:21 user profilesend a private message to userreply to postreply to postsearch all posts byselect and copy to clipboard. 
ie only, sorry for netscape users:-)add this post to my favorite list
scoop wrote:
請問一下 欄寬可以自行設定嗎?
我看了一下程式 欄寬似乎由 <th> 決定,
有沒有辦法可以讓每一個欄位的寬度都不一樣??

這個說來話長,在w3c內css2.1第九章寫的很清楚
html元素是由各種型式的box區塊組成的
而這些box 的位置 position有好幾種 加上佈局可能用float
我猜table是用float而他的box是run-in型態
當然th可以指定寬度
不過你先得看看你的td th tr table各種設定 才能讓你有最好的用法
所以去看css2.1第九章 及 十七章
http://www.w3.org/TR/CSS21/cover.html#minitoc
http://www.w3.org/TR/CSS21/visuren.html
http://www.w3.org/TR/CSS21/tables.html
還有附註 可了解預設的html4.0的css設定
http://www.w3.org/TR/CSS21/sample.html
另外再說一點,就算css2.1你都會了 那ie不一定能有好的執行
ie很多css都不支援再貼上給你參考
http://www.quirksmode.org/
這個網站的css有列出各家支不支援css 2
只能說要用在ie可能除了用試的了


reply to postreply to post
作者 Re:HTML的Table沒有方便的方法可以作ScrollBar嗎? [Re:tigerobj]
老陳





發文: 161
積分: 2
於 2005-02-26 01:11 user profilesend a private message to userreply to postreply to postsearch all posts byselect and copy to clipboard. 
ie only, sorry for netscape users:-)add this post to my favorite list
tigerobj wrote:
那個作法真的不是很好
用expression在w3c根本就驗證不過,是IE自已搞的,作用在css內可用javascript而已
那個方法跟寫在div的onscroll的事件是一樣的.
不算是正規的css,css本來就無法動態計算位置.
另外如果用這個那Mozilla根本就不能用
說穿了還是得靠javascript來作這些動作.
另外我在猜為什用expression那是因為 ie6不支援 position:fixed的原故吧
使用一大堆非正規的東西,讓人真的很火大.如果都用w3c規範的.
也能讓我們減少測試 除錯.


是啊,不是標準的東西真的很不好,不過,問題就在於標準的好像沒辦法達成這樣的需求,scrollBar是一個非常必要的東西,理應由default component就應該完全supoort

當然,還是有人作好的可以用啦,就是之前jini大大提供的 http://www.activeui.net/
不過,這個只有javascript是free的,如果要用它的jsp tag的話,就要收費了
Evil


browser edited on 2005-02-26 04:22
reply to postreply to post
電腦是害人的工具,但是上帝卻可以藉著它行奇妙的大能
作者 Re:HTML的Table沒有方便的方法可以作ScrollBar嗎? [Re:老陳]
tigerobj





發文: 26
積分: 0
於 2005-03-09 14:41 user profilesend a private message to userreply to postreply to postsearch all posts byselect and copy to clipboard. 
ie only, sorry for netscape users:-)add this post to my favorite list
如果要作到固定列也可以很簡單
以下是我朋友作出來的,培培我把你的大作呈現出來,
我想要說的是即然是程式設計師就是要對基本的理論要熟
而且能應用,只是用些不標準的東西,這只會使ie更強大,
結果呢 好用的 免費的 opensource都變的沒人用,
用這樣設計出來的東西不都被ie綁死了嗎.
======================================
另外這個在firefox上執行如果用滾輪會有bug
不過等新版的firefox出來後應該就會解決了
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE> testDivTable </TITLE>
    <STYLE type="text/css">
      
      .fixrow {background-color: #00c;position: absolute; left:80px; width:405px; height:30px}
      .fixcol {background-color: #ccc;position: absolute; width:80px /*;clip:shape*/ } /* clip:視覺截切 與轉折無關!! */
      .cellwidth {width:100px;min-width:100px; border:solid red 1px; white-space:nowrap}
      .cellwidthSelf {width:200px;min-width:100px; border:solid red 1px; white-space:nowrap}
      TD {overflow:hidden}
      pre {margin:0}
    </STYLE>
    
    <SCRIPT>
      function adjustScroll(obj){
        document.getElementById("tabHead").scrollLeft=document.getElementById(obj.id).scrollLeft;
        document.getElementById("tabLeft").scrollTop=document.getElementById(obj.id).scrollTop;
      }
      function test ( e ){
        document.getElementById("tabLeft").scrollTop=document.getElementById('divContent').scrollTop;
      }
    </SCRIPT>
  </HEAD>
  <BODY>
    <DIV style="position: absolute; left:20px; top: 20px; width:500px; height:300px; background-color:yellow">
      <!--左上角-->
      <DIV class=fixcol style="height:30px; width:80px">
         
      </DIV>
      <!--上面標題列-->
      <DIV id=tabHead class=fixrow style="overflow:hidden; color:yellow">
        <TABLE width=220px style="table-layout: fixed"><TR>
          <SCRIPT>
            for(var i=1;i<10;i++)
            if(i==1)
                    document.writeln("<TD class='cellwidthSelf'><pre>HEAD HEAD is "+ i + "</pre></TD>");
                else
                    document.writeln("<TD class='cellwidth'><pre>HEAD HEAD is "+ i + "</pre></TD>");    
          </SCRIPT>
        </TR></TABLE>
      </DIV>
  
      <!--table的左邊固定-->
      <DIV id=tabLeft class=fixcol style="overflow:hidden;top:30px;height:250px"><!-- ;white-space:nowrap -->
        <TABLE>
          <SCRIPT>
            for(var i=1;i<400;i++)
              document.writeln("<TR><TD class='cellwidth'><pre>fixrow"+ i + "</pre></TD></TR>");
          </SCRIPT>
        </TABLE>
      </DIV>
      <!--table內容-->
      <DIV id=divContent style="position:absolute; top:30px; left:80px; width:420px; overflow:scroll; height:270px" onscroll="adjustScroll(this);">
           <!-- onmousemove="if (this.scrollTop!=document.getElementById('tabLeft').scrollTop) adjustScroll(this);" -->
        <TABLE width=220px style="table-layout: fixed">
          <SCRIPT>
            for(var i=1;i<400;i++){
              document.writeln("<TR>");
              for(var j=1;j<10;j++)
                   if(j==1)
                             document.writeln("<TD class='cellwidthSelf'><pre>(row is num = "+ i + ",col"+j+")</pre></TD>");
                         else
                             document.writeln("<TD class='cellwidth'><pre>(row is num = "+ i + ",col"+j+")</pre></TD>");
              document.writeln("</TR>");
            }
          </SCRIPT>
        </TABLE>
      </DIV>
    </DIV>
  </BODY>
</HTML>


testDivTable.html (2.78k)


tigerobj edited on 2005-03-09 14:53
reply to postreply to post
» JWorld@TW »  Web Design 版

reply to topicthreaded modego to previous topicgo to next topic
  已讀文章
  新的文章
  被刪除的文章
Jump to the top of page

JWorld@TW 本站商標資訊

Powered by Powerful JuteForum® Version Jute 1.5.8