html tables with scrollbars

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
prasadp69Asked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
COBOLdinosaurConnect With a Mentor Commented:
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
 
webwomanCommented:
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
 
ClassyLinksCommented:
>>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
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
COBOLdinosaurCommented:
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
 
raizonCommented:
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
 
ahoffmannCommented:
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
 
COBOLdinosaurCommented:
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
 
prasadp69Author Commented:
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
 
COBOLdinosaurCommented:
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
 
COBOLdinosaurCommented:
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
 
prasadp69Author Commented:
Thank You for your help.

Prasad
0
 
COBOLdinosaurCommented:
Prasad,

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

Cd&
0
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.

All Courses

From novice to tech pro — start learning today.