Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Keeping one column static while other scroll

Posted on 2003-12-04
13
673 Views
Last Modified: 2010-04-09
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.
0
Comment
Question by:anna_123
  • 5
  • 3
  • 2
  • +3
13 Comments
 
LVL 3

Expert Comment

by:daveroydunn
ID: 9881408
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
 

Author Comment

by:anna_123
ID: 9881684
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
 
LVL 9

Expert Comment

by:pepsichris
ID: 9881792
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
Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

Expert Comment

by:langjt
ID: 9882217
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
 

Expert Comment

by:langjt
ID: 9882232
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
 
LVL 9

Expert Comment

by:pepsichris
ID: 9882282
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
 

Expert Comment

by:langjt
ID: 9882288
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
 

Expert Comment

by:langjt
ID: 9882295
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
 
LVL 9

Assisted Solution

by:pepsichris
pepsichris earned 82 total points
ID: 9882403
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
 

Expert Comment

by:langjt
ID: 9882419
not too shabby!
needs neating sure, but it always does ;)

Jody
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 175 total points
ID: 9882848
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
 
LVL 11

Assisted Solution

by:Zontar
Zontar earned 73 total points
ID: 9886704
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
 

Author Comment

by:anna_123
ID: 9887135
Thank You So much Experts for ur help.
That was great.
;)
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question