SiteExperts.com Logo Home | Community | Developer's Paradise
User Groups | Site Tools | Site Information | Search
 Main Menu
 Forums
SiteExperts.com Forums
All Discussions

SiteExperts Feedback
The Lounge
Dynamic HTML
Site Design/ Critiques
HTML and CSS
XML Technologies
The Wireless Internet
Internet Explorer
Microsoft .NET
The Server
Technical Support

Sponsored Links

User Groups : Forums : SiteExperts : All Topics : Dynamic HTML :

Previous DiscussionNext Discussion
 Lock Table Vertically

I saw someone create a table that lock the table headers so that when a user scrolled down the table the header didn't move.

What I want to do is to lock the table vertically so that when a user scrolls the table.. They do not lose the information that details that row.

If someone know how it would be appreciated. I would like to combine locking top and side and just see data scroll.

Thanks

Andy

 

Started By andylk on Aug 27, 2005 at 2:49:19 PM

10 Response(s) | Reply

Earlier Replies | Replies 4 to 10 of 10 | Later Replies
Goto Page: 2 1
bod1467 on Aug 28, 2005 at 6:44:04 AM (# 4)

What's being asked is akin to Freeze Panes in Excel.


marvin on Aug 28, 2005 at 3:39:41 PM (# 5)

make the header row in 1 table then put a scrolling table directly below it - not technologically advanced but it's simple and works


andylk on Aug 29, 2005 at 12:18:32 PM (# 6)

Thanks for the advice,

If you could please show me how to impliment these ideas. Any coe would be greatly appreciated.

 

Thanks

 

Andy

 

 

 


KustomKraft on Aug 29, 2005 at 1:30:36 PM (# 7)
This message has been edited.

For Mozilla base browsers you can use the overflow attribute of the <tbody>

<table border="1">
 <thead>
  <tr>
   <td>Header 1</td>
   <td>Header 2</td>
   <td>Header 3</td>
  </tr>
 </thead>
 <tbody style="overflow: auto; height: 200px;">
  <tr><td>cell</td><td>cel2</td><td>cel3</tr>
  <tr><td>cell</td><td>cel2</td><td>cel3</tr>
  <tr><td>cell</td><td>cel2</td><td>cel3</tr>
  <tr><td>cell</td><td>cel2</td><td>cel3</tr>
  <tr><td>cell</td><td>cel2</td><td>cel3</tr>
  <tr><td>cell</td><td>cel2</td><td>cel3</tr>
  <tr><td>cell</td><td>cel2</td><td>cel3</tr>
  <tr><td>cell</td><td>cel2</td><td>cel3</tr>
  <tr><td>cell</td><td>cel2</td><td>cel3</tr>
  <tr><td>cell</td><td>cel2</td><td>cel3</tr>
  <tr><td>cell</td><td>cel2</td><td>cel3</tr>
  <tr><td>cell</td><td>cel2</td><td>cel3</tr>
  <tr><td>cell</td><td>cel2</td><td>cel3</tr>
  <tr><td>cell</td><td>cel2</td><td>cel3</tr>
  <tr><td>cell</td><td>cel2</td><td>cel3</tr>
  <tr><td>cell</td><td>cel2</td><td>cel3</tr>
  <tr><td>cell</td><td>cel2</td><td>cel3</tr>
  <tr><td>cell</td><td>cel2</td><td>cel3</tr>
  <tr><td>cell</td><td>cel2</td><td>cel3</tr>
  <tr><td>cell</td><td>cel2</td><td>cel3</tr>
  <tr><td>cell</td><td>cel2</td><td>cel3</tr>
  <tr><td>cell</td><td>cel2</td><td>cel3</tr>
  <tr><td>cell</td><td>cel2</td><td>cel3</tr>
 </tbody>
</table>

Some IE only solutions
http://webfx.eae.net/dhtml/syncscroll/syncscroll.html
http://webfx.eae.net/dhtml/grid/intro.html
http://www.stedy.com/ieWidgets/coolUltraGrid/coolUltraGrid.htm

Some "sorta" cross browser solutions
http://www.domapi.com/examples/index.cfm?s1=listgrid.htm
http://www.whirlywiryweb.com/q/dhtmlgems.asp

Some server solutions
http://www.infragistics.com/
http://www.fpoint.com/

I personally have just given in and put the tables inside a div with the overflow set to auto. Since
I use asp.net I also use a 3rd part dll (The SmartScroller version 1.2 http://www.strengthtechnologies.com)
to help maintain the scroll position on postbacks.  I have found this to be effictive enough.

There are about as many different implementations of this particular issue as you can possible imagine. 
I have used about half of them :-). Some are simple as you want it to be, but don't expect too much
flexibility.  Some are complicated and difficult to implement, but work beautifully.  It is supprising
that this is not more widely supported. I would suggest googeling for Scrollable Tables.

For the "Freeze" feature like you see in excel, some of the server side solutions above implement that
type of feature. Its all client side code, a little javascript and some css, so you "can" do it if
you want to spend the time to break it down.  The webfx guys help me out with some mods to the syncscroll
solution listed first.  We implemented that for a customer and it did have the freeze like feature, but
unfortunatlly that was several years ago and I dont have that code anymore. 

As you can see my very first post was about just this... http://www.siteexperts.com/forums/viewConverse.asp?d_id=3555

Happy hunting...  If i find more info ill put it in.


andylk on Aug 29, 2005 at 9:02:36 PM (# 8)

Kustom,

Thanks for the leads. I'll keep looking

 

Andy

 


simonleung on Sep 3, 2005 at 9:08:20 AM (# 9)

<!doctype html public "-//w3c//dtd html 4.0 strict//en">
<html>
<head>
<style>
body {padding-right:30px;}

div.TC {
 border:1px #7494BF solid;
 overflow:auto;
 overflow-x:hidden;
 height:200px;
 cursor:default;
 }

table { border:0px;
 width:100%;
 }

tr.tableHead {
 position:relative;
 background-color:#BFCEE7;
 }

tr.tableHead td{   
 border:#7494BF solid;
 border-width:0px 1px 1px 0px;
 text-align:center;
 }

td {
 border-right:1px #7494BF solid;
 padding-left:2px;
}
</style>
</head>
<body>
<div class="TC">
<table cellspacing="0" cellpadding="0">
<tr class="tableHead" onselectstart="return false">
<td>heading1</td>
<td>heading2</td>
<td>heading3</td>
<td>heading4</td>
<td>heading5</td>
</tr>
<tr><td>cell11</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
<tr><td>cell n</td><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
</table>
</div>
</body>
</html>

IE6 only

It may not work in IE7


andylk on Sep 5, 2005 at 12:44:12 PM (# 10)

Thanks for all of the help. Most of the solutions work on small tables. I had a monster 200 x 500.

 

I talked my boss out of it.

 

Thanks

 

Andy


Earlier Replies | Replies 4 to 10 of 10 | Later Replies
Goto Page: 2 1

To respond to a discussion, you must first logon.

If you are not registered, please register yourself to become a member of the SiteExperts.community.

User Name
Password
Copyright 1997-2004 InsideDHTML.com, LLC. All rights reserved.