Solved

html tables with scrollbars

Posted on 2001-07-30
12
350 Views
Last Modified: 2012-05-04
Hi,

I need a table with headers at the top and at left side. I need scrolling bars on the bottom and at the right. For ex: table consists of 10 columns and 20 rows. so you will have 11 columns for the extra column to accomodate the headers for rows.

Just like Microsoft excel spreadsheet's, freeze panes functionality, I would like to have the same option for my users to scroll right, left, top, bottom. Users should look at the data in the table cells (in specific column and specific row)

Is this possible using HTML/DHTML/Javascript/Frames or a combination. If so, can I be able to get the code template.

Scenario will be like this. Users select their required columns and rows from a database and the database will send the details to this table populated with row and column headers.

Please let me know if I need to clarify more.

Thank you very much for your help.
prasad
0
Comment
Question by:prasadp69
[X]
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
12 Comments
 
LVL 19

Expert Comment

by:webwoman
ID: 6335549
This isn't Excel. Don't expect it to be. You're not going to be able to set headers the way you do in Excel.

And actually, if you need that,it would probably be better to just force it into Excel -- but if you're doing it dynamically, I doubt you'd be able to force a freeze panes where you need it.

You COULD load it into a layer and use clip to have it scroll... and that might be the best (and most compatible) option. But that's going to scroll the entire thing, not freeze something on the top/side.

After fooling around with a whole lot of scripting you MIGHT be able to get the various layers to display and scroll the way you want. But it's not going to be easy, and if you tell us exactly what you're trying to accomplish, there might be a better, much easier, more likely for you to be able to maintain, way.
0
 
LVL 7

Expert Comment

by:ClassyLinks
ID: 6335614
>>Users select their required columns and rows from a database and the database
will send the details to this table populated with row and column headers.

You could do this with ASP.  Create a page where they select their criteria from a form...when the form submits it pulls the info from the db and displays in a table.

Would you like more details?

0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6335658
What you ask for is not going to be done using browser technology.  The code below will give you
a scrolling table with fixed heading for IE only.  For both heading and a static column you will need
frames.  When the cells resize the static components will not.

As for accessing the database that is not possible on the client.  You have to send a form to a
server side script to execute a query.  On server side you then have to dynamically generate the
HTML to render the code.

A browser is a rendering engine, not a GUI.  I you need spread sheet functionality, then you
need to use a GUI application a browser cannot do the kinds of things you are asking for

It is probably possible with a lot of code to simulate a GUI, but that is a major project
and far beyond the scope of what we do on this site.

<html>
<head>
   <title> scrollable table</title>
   <style>
      .header {color:white;background-color:navy}
      .oddrow {background-color:lightyellow}
      .evenrow {background-color:aqua}
      body {background-color:silver}
      .activerow {color:white;background-color:red}
   </style>
<body>
   <div style="position:absolute;left:0;top:10">
      <table frame="border" width = 580>
         <col width=130>
         <col width=90>
         <col width=90>
         <col width=90>
         <col width=90>
         <col width=90>
         <tr class="header">
            <th>first</th>
            <th>second</th>
            <th>third</th>
            <th>fourth</th>
            <th>fifth</th>
            <th>sixth</th>
         </tr>      
      </table>
      <div STYLE="overflow:auto;width:596;height:375;">
         <table frame="border" width=580 height=1200 >
         <col width=130>
         <col width=90>
         <col width=90>
         <col width=90>
         <col width=90>
         <col width=90>
         <tr class="evenrow" onMouseover="this.className='activerow'"
                             onMouseout="this.className='evenrow'">
            <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 class="oddrow" onMouseover="this.className='activerow'"
                             onMouseout="this.className='oddrow'">
            <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 class="evenrow" onMouseover="this.className='activerow'"
                             onMouseout="this.className='evenrow'">
            <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 class="oddrow" onMouseover="this.className='activerow'"
                             onMouseout="this.className='oddrow'">
            <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 class="evenrow" onMouseover="this.className='activerow'"
                             onMouseout="this.className='evenrow'">
            <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 class="oddrow" onMouseover="this.className='activerow'"
                             onMouseout="this.className='oddrow'">
            <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 class="evenrow" onMouseover="this.className='activerow'"
                             onMouseout="this.className='evenrow'">
            <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 class="oddrow" onMouseover="this.className='activerow'"
                             onMouseout="this.className='oddrow'">
            <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 class="evenrow" onMouseover="this.className='activerow'"
                             onMouseout="this.className='evenrow'">
            <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 class="oddrow" onMouseover="this.className='activerow'"
                             onMouseout="this.className='oddrow'">
            <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 class="evenrow" onMouseover="this.className='activerow'"
                             onMouseout="this.className='evenrow'">
            <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 class="oddrow" onMouseover="this.className='activerow'"
                             onMouseout="this.className='oddrow'">
            <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 class="evenrow" onMouseover="this.className='activerow'"
                             onMouseout="this.className='evenrow'">
            <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 class="oddrow" onMouseover="this.className='activerow'"
                             onMouseout="this.className='oddrow'">
            <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>      
   <table border=1 width=580 bgcolor="silver">
      <col width = 130>
      <col width = 90>
      <col width = 90>
      <col width = 90>
      <col width = 90>
      <col width = 90>
      <tr>
         <th></th>
         <th></th>
         <th></th>
         <th></th>
         <th></th>
         <th></th>
      </tr>      
   </table>
</div>
</body>
</html>
      
HTH

Cd&

0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 5

Expert Comment

by:raizon
ID: 6335691
If you build your table dynamically based on the recordset recieved from the database then you can also add labels at the top and left sides.

Technologies needed.

Server Side Scripting (ASP, JSP, PHP, CGI)
Style Sheets
HTML

My example will be using ASP & SQL7.0
Eample:
The user selects to view all the columns in the table and there are 7 of them.

<%

Set oConn = Server.CreateObject("ADODB.Connection")
          oConn.Provider = "SQLOLEDB.1"
          oConn.ConnectionString = "Password=;User ID=;Initial Catalog=TestDB;Data Source=localhost;"
          oConn.Open

strSql = "Select * from table"
set rst = oConn.Execute(strSql)
If Not rst.EOF Then
set Fields = rst.Fields
strOut = "<table><tr>"
For each Field in in Fields
 strOut = strOut & "<td><b>" & Field.Name & "</b></td>"
Next
strOut = strOut & "</tr>"
intCount = 1
Do While Not rst.EOF
 strOut = strOUt & "<tr>"
 strOut = strOut & "<td><b>LeftHeader#" & intCount & "</b></td>"
 strOut = strOut & "<td>" & rst(0) & "</td>"
 strOut = strOut & "<td>" & rst(1) & "</td>"
 strOut = strOut & "<td>" & rst(2) & "</td>"
 strOut = strOut & "<td>" & rst(3) & "</td>"
 strOut = strOut & "<td>" & rst(4) & "</td>"
 strOut = strOut & "<td>" & rst(5) & "</td>"
 strOut = strOut & "<td>" & rst(6) & "</td>"
 strOut = strOut & "</tr>"
 rst.MoveNext
Loop
End If
 strOut = strOut & "</table>"
Response.Write strOut
rst.Close
Fields.Close
oConn.Close
Set rst=Nothing
Set Fields=Nothing
Set oConn=Nothing
%>

Then either inside a new window, frameset, or IFrame(IE/NS6 only) put the above code to get your scroll bars.
0
 
LVL 51

Expert Comment

by:ahoffmann
ID: 6335789
i.g. see COBOLdinosaur first comment (about GUI, CGI-query your database).
But you may try Tcl/Tk which also has a Plugin for IE and Netscape (probably works for Opera too).
The Tcl/Tk program may also be tested without a browser.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6351856
prasadp69,

If you want a solution you are going to have to participate. The site is called experts "***___exchange___***"  because we exchange information and work towards a solution.  If you do not participate and respond to the comments posted, you are not likely to get good results using the site.  It is not a news group.

Cd&

0
 

Author Comment

by:prasadp69
ID: 6355457
Hello everyone,

Thank you for responding to my question. As I am very busy last week, I could not reply. I apologize for that.

As the answers posted are not meeting my requirements, I am waiting for some more answers from this group or from some one else.

Thank you
prasadp69
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6355852
Based on the requirements in the question, I don't believe there is going to be any additional solution.  The limits of the technology will not do what you want.  You either need to reassess the requirements, or look for different technology to do what you want.  

Cd&
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6404398
prasadp69,

Where do we go with. As I already said you are not going to get the solution you are looking for.  You either have to change the requiremnets ofr look at different technology.  Wjhat's it going to be.

Cd&
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 300 total points
ID: 6425119
prasadp69,

This Ta is not a parking lot for questions where you will not accept that what you want is not possible.

Either compromise on the requirements, accept one of the comments that has been provided or ask Community support to advise you on how to proceed.  

If you do not manage the question, I will ask a moderator to intervene.

Cd&
0
 

Author Comment

by:prasadp69
ID: 6428214
Thank You for your help.

Prasad
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6428286
Prasad,

Thankd for coming back to grade it, and thanks for the A. :^)

Cd&
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

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

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…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

615 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