Solved

html tables with scrollbars

Posted on 2001-07-30
12
345 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Html split(text) Part2 6 41
Jquery HTML() with ajax... replacing content 2 53
Trying to use &NBSP to line up 3 rows 12 40
Drag & Drop Error 5 32
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
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)

751 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