Keeping one column static while other scroll

I have a JSP page in which I am displaying data in the form of HTML table.
<TABLE>
  <TR>
       <TH>ID</TH>
       <TH>NAME</TH>
      ...  
      <TH>ADDRESS</TH>
     </TR>
  <TR>
       <TD><%=rs.getString("id")%></TD>
       <TD><%=rs.getString("name")%></TD>
       ...
       <TD><%=rs.getString("address")%></TD>
   </TR>
  </TABLE>
The problem is there are large number of columns. To view all of them the user needs to scroll horizontally and then he/she looses view of the primary key column.
Say "Address" is the 15 column. To view it user scrolls horizontally but then he/she is not able to make out for which "id" this address is. I want that the "id" column always stays where it is while others move horizontally.
Plz help as to how this  can be done.
anna_123Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

daveroydunnCommented:
A straight forward method would be to have an ID column every few columns.
There are other methods that are more complex but I think that going for the simple solution is often the best.
0
anna_123Author Commented:
Thanks for ur suggestion.
Already did this. But was rejected, reason being there are already too many columns it only increases the number. Secondly, it's a bit confusing for users to
find the id column repeated in between. So in hunt for a better method
0
pepsichrisCommented:
I'd suggest some sort of DHTML floating menu.  They're usually designed to follow the page as it goes down, but you should be able to tailor it so it goes horizontally...

http://www.web-friend.com/services/samples/dhtmltopfloat.html

http://javascript.internet.com/navigation/portable-menu.html
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

langjtCommented:
Easiest solution would be to make a frame with the side of the frame to have the ID, and the other to have the rest oft he table, although this will not work very well if you also scroll vertically.

anyways, thats my 2 cents.

Jody
0
langjtCommented:
just thought, maybe you could embed an excel docuent in the webpage? dont ask me how to do it, but it would be an interesting thought. Because with excel, you can make some column stationary so that they are always visible.

thats my other 2 cents :D

Jody
0
pepsichrisCommented:
I think Jody's second idea could well work - in most versions of Excel you can simply select "Save as html" off the File menu.  It gives you really messy coding, but it does the job.  I think Dreamweaver MX has a feature for "repairing" Microsoft coding, so maybe use them together?
0
langjtCommented:
interesting, i didnt know you could actually save an excel sheet as html.. gonna try that and see if it works.
let ya know how it works out.
0
langjtCommented:
okay, it works, but the stationary column feature goes away when you do it. i think actually embedding it would be the way to go so far, if that is feasible.
0
pepsichrisCommented:
This seems to work.  Obviously needs neatening up etc.

<html>
<head>
<title>Thing</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<SCRIPT LANGUAGE="JavaScript">

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
function setVariables() {
if (navigator.appName == "Netscape") {
v=".left=";
dS="document.";
sD="";
x="window.pageXOffset";
}
else {
v=".pixelLeft=";
dS="";
sD=".style";
x="document.body.scrollLeft";
   }
}
function checkLocation() {
object="object1";
xx=eval(x);
eval(dS+object+sD+v+xx);
setTimeout("checkLocation()",10);
}
//  End -->
</script>


</head>



<body bgcolor="#FFFFFF" link="#0000CC" vlink="#0000CC" alink="#0000CC" OnLoad="setVariables();checkLocation()" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="object1" style="position:absolute; left:0px; top:0px; z-index:2">
  <table width=20 border=0 cellspacing=0 cellpadding=0 bgcolor="#9999FF">
    <tr align="center">
      <td>1</td>
</tr>
    <tr align="center">
      <td>2</td>
</tr>
    <tr align="center">
      <td>3</td>
</tr>
    <tr align="center">
      <td>4</td>
</tr>
    <tr align="center">
      <td>5</td>
</tr>
    <tr align="center">
      <td>6</td>
</tr>
    <tr align="center">
      <td>7</td>
</tr>
    <tr align="center">
      <td>8</td>
</tr>
</table>
</div>
<table width="200%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="20" />
    <td>khklh</td>
    <td>klhlkh</td>
    <td>klhlkh</td>
    <td>klhlkh</td>
    <td>klhlkh</td>
    <td>klhlkh</td>
  </tr>
  <tr>
    <td width="20" />
    <td>khklh</td>
    <td>klhlkh</td>
    <td>klhlkh</td>
    <td>klhlkh</td>
    <td>klhlkh</td>
    <td>klhlkh</td>
  </tr>
  <tr>
    <td width="20" />
    <td>khklh</td>
    <td>klhlkh</td>
    <td>klhlkh</td>
    <td>klhlkh</td>
    <td>klhlkh</td>
    <td>klhlkh</td>
  </tr>
  <tr>
    <td width="20" />
    <td>khklh</td>
    <td>klhlkh</td>
    <td>klhlkh</td>
    <td>klhlkh</td>
    <td>klhlkh</td>
    <td>klhlkh</td>
  </tr>
  <tr>
    <td width="20" />
    <td>khklh</td>
    <td>klhlkh</td>
    <td>klhlkh</td>
    <td>klhlkh</td>
    <td>klhlkh</td>
    <td>klhlkh</td>
  </tr>
  <tr>
    <td width="20" />
    <td>khklh</td>
    <td>klhlkh</td>
    <td>klhlkh</td>
    <td>klhlkh</td>
    <td>klhlkh</td>
    <td>klhlkh</td>
  </tr>
  <tr>
    <td width="20" />
    <td>khklh</td>
    <td>klhlkh</td>
    <td>klhlkh</td>
    <td>klhlkh</td>
    <td>klhlkh</td>
    <td>klhlkh</td>
  </tr>
</table>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</body>
</html>
0
langjtCommented:
not too shabby!
needs neating sure, but it always does ;)

Jody
0
COBOLdinosaurCommented:
This will make genration a little more difficult, but it will give you smooth scrolling without re-positioning the column.  Works for IE and Mozilla based browsers.  The beauty is that it is pure HTML with a little CSS, so it will still function correctly even if the user has disabled scripting:

<html>
<head>
   <title> scrollable table</title>
<body>
      <div style="position:absolute;top:60;left:0;width:100">
      <table width="100" frame="border">
      <tr style="height:60"><td>Row 1</td></tr>
      <tr style="height:60"><td>Row 2</td></tr>
      <tr style="height:60"><td>Row 3</td></tr></table></div>
      <div class="maindiv" STYLE="position:absolute;left:100;top:60;overflow:scroll;width:250px">
         <table frame="border">
         <tr>
            <td height=60>Cd&</td>
            <td height=60>:^)</td>
            <td height=60>colC</td>
            <td height=60>xxxx</td>
            <td height=60>:^)</td>
            <td height=60>Cd&</td>
            <td height=60>Cd&</td>
            <td height=60>:^)</td>
            <td height=60>colC</td>
            <td height=60>xxxx</td>
            <td height=60>:^)</td>
            <td height=60>Cd&</td>
            <td height=60>Cd&</td>
            <td height=60>:^)</td>
            <td height=60>colC</td>
            <td height=60>xxxx</td>
            <td height=60>:^)</td>
            <td height=60>Cd&</td>
            <td height=60>Cd&</td>
            <td height=60>:^)</td>
            <td height=60>colC</td>
            <td height=60>xxxx</td>
            <td height=60>:^)</td>
            <td height=60>Cd&</td>
         </tr>
         <tr>
            <td height=60>Cd&</td>
            <td height=60>:^)</td>
            <td height=60>colC</td>
            <td height=60>xxxx</td>
            <td height=60>:^)</td>
            <td height=60>Cd&</td>
            <td height=60>Cd&</td>
            <td height=60>:^)</td>
            <td height=60>colC</td>
            <td height=60>xxxx</td>
            <td height=60>:^)</td>
            <td height=60>Cd&</td>
            <td height=60>Cd&</td>
            <td height=60>:^)</td>
            <td height=60>colC</td>
            <td height=60>xxxx</td>
            <td height=60>:^)</td>
            <td height=60>Cd&</td>
            <td height=60>Cd&</td>
            <td height=60>:^)</td>
            <td height=60>colC</td>
            <td height=60>xxxx</td>
            <td height=60>:^)</td>
            <td height=60>Cd&</td>
         </tr>
         <tr>
            <td height=60>Cd&</td>
            <td height=60>:^)</td>
            <td height=60>colC</td>
            <td height=60>xxxx</td>
            <td height=60>:^)</td>
            <td height=60>Cd&</td>
            <td height=60>Cd&</td>
            <td height=60>:^)</td>
            <td height=60>colC</td>
            <td height=60>xxxx</td>
            <td height=60>:^)</td>
            <td height=60>Cd&</td>
            <td height=60>Cd&</td>
            <td height=60>:^)</td>
            <td height=60>colC</td>
            <td height=60>xxxx</td>
            <td height=60>:^)</td>
            <td height=60>Cd&</td>
            <td height=60>Cd&</td>
            <td height=60>:^)</td>
            <td height=60>colC</td>
            <td height=60>xxxx</td>
            <td height=60>:^)</td>
            <td height=60>Cd&</td>
         </tr>
      </table>
   </div>
</body>
</html>
      
Cd&

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
ZontarCommented:
CD, your CSS is invalid; non-zero lengths require units of measurement.

Also, there's no need for absolutel positioning or all that height=60 bloativity, either, when three lines of CSS will do the job:

<html>
<style type="text/css">
  div.maindiv { overflow:scroll; width:250px; }
 
  table#outer td { height:60px; padding:0px; }
 
  table#inner td { height:60px; }
</style>
<head>
   <title> scrollable table</title>
<body>
      <table id="outer" frame="border">
      <tr>
        <td nowrap>Row 1</td>
        <td rowspan="3">        
          <div class="maindiv">
             <table id="inner" frame="border">
             <tr>
                <td>Cd&</td>
                <td>:^)</td>
                <td>colC</td>
                <td>xxxx</td>
                <td>:^)</td>
                <td>Cd&</td>
                <td>Cd&</td>
                <td>:^)</td>
                <td>colC</td>
                <td>xxxx</td>
                <td>:^)</td>
                <td>Cd&</td>
                <td>Cd&</td>
                <td>:^)</td>
                <td>colC</td>
                <td>xxxx</td>
                <td>:^)</td>
                <td>Cd&</td>
                <td>Cd&</td>
                <td>:^)</td>
                <td>colC</td>
                <td>xxxx</td>
                <td>:^)</td>
                <td>Cd&</td>
             </tr>
             <tr>
                <td>Cd&</td>
                <td>:^)</td>
                <td>colC</td>
                <td>xxxx</td>
                <td>:^)</td>
                <td>Cd&</td>
                <td>Cd&</td>
                <td>:^)</td>
                <td>colC</td>
                <td>xxxx</td>
                <td>:^)</td>
                <td>Cd&</td>
                <td>Cd&</td>
                <td>:^)</td>
                <td>colC</td>
                <td>xxxx</td>
                <td>:^)</td>
                <td>Cd&</td>
                <td>Cd&</td>
                <td>:^)</td>
                <td>colC</td>
                <td>xxxx</td>
                <td>:^)</td>
                <td>Cd&</td>
             </tr>
             <tr>
                <td>Cd&</td>
                <td>:^)</td>
                <td>colC</td>
                <td>xxxx</td>
                <td>:^)</td>
                <td>Cd&</td>
                <td>Cd&</td>
                <td>:^)</td>
                <td>colC</td>
                <td>xxxx</td>
                <td>:^)</td>
                <td>Cd&</td>
                <td>Cd&</td>
                <td>:^)</td>
                <td>colC</td>
                <td>xxxx</td>
                <td>:^)</td>
                <td>Cd&</td>
                <td>Cd&</td>
                <td>:^)</td>
                <td>colC</td>
                <td>xxxx</td>
                <td>:^)</td>
                <td>Cd&</td>
             </tr>
          </table>
       </div>
        </td></tr>
      <tr nowrap><td>Row 2</td></tr>
      <tr nowrap><td>Row 3</td></tr></table>
</body>
</html>

Inline styles are evil and should be avoided.
0
anna_123Author Commented:
Thank You So much Experts for ur help.
That was great.
;)
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.