Solved

html tables with scrollbars

Posted on 2001-07-30
12
334 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
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
 
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
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 

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

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Showing your events from Google Calendar in Google Maps Why? I travel all week and I thought it would be ideal if staff in office knew where I was based on my calendar. (OK real reason: my son wanted to see where I would be working, and I thoug…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

747 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now