Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

how can i put scroll bar to tbody 1

Status
Not open for further replies.

besiktas

Programmer
Mar 12, 2003
4
TR
how can i put scroll bar to table bodies independently of the table header and footer. how can i print long table, the table header and footer information may be repeated on each page that contains table data.
::)
 
I'm not sure you can do this without using something like java. Scrollbars are a function of the browser rather than the html document itself.

If I have understood your requirements correctly I would use framesets rather than tables to approach this problem. Frames, like tables, can have visible or invisible borders which can be either fixed in position or be moveable by the user.

The contents of each frame are actually separate html documents, thus you avoid the need to duplicate the layout for your header and footer. You can have scrollbars visible or invisible for individual frames which sounds like it would suit your situation.

You need a parent page which contains the frameset, and then a separate html page for the contents of each frame. If I start going into code here I'll make it look at lot more complicated than it is. Just do a quick google search for html tutorials, I found which seems to cover everything I could tell you here.

The difference between this and what you are suggesting is that with frames the header will always sit at the top of the window and the footer will always sit at the bottom. If your header and footer are large this then limits the available screen space for your actual page.

Most if not all browsers released in the past 5 years will support frames so there should be no compatibility issues unless you are targetting users with very dated systems.

I hope this helps,

tyger.
 



You can use scroll bars on your table if you put your table in a DIV and use some nifty STYLE tags.

I think what you what is as demo'd in the code below. This works by using 3 tables, 1 for your header, 1 for your footer and one in the middle (inside the DIV with the scrollbars!)


Try it out, at least it should give you a point to start from.



<HTML>

<BODY style=&quot;MARGIN-TOP: 0px; MARGIN-LEFT: 0px; MARGIN-RIGHT: 0px&quot; bgcolor=&quot;#EEEEEE&quot;>
<FONT size=&quot;1&quot;>

<BR><BR>
<CENTER>


<TABLE cellSpacing=2 cellPadding=4 border=0 style=&quot;width :600px;&quot;>
<TBODY>
<TR style=&quot;background-color:#C0C0FF;&quot;>
<TD width=&quot;15%&quot;><B>Heading 1</B></TD>
<TD width=&quot;33%&quot;>Sub Heading </TD>
<TD width=&quot;15%&quot;><B>Heading </B></TD>
<TD width=&quot;37%&quot;>Sub Heading </TD></TR>
</TBODY></TABLE>
<DIV style=&quot;height:200px;width :600px;overflow:auto;&quot;>
<TABLE cellSpacing=2 cellPadding=4 border=0 style=&quot;width:98%;height:98%;&quot;>
<TBODY>
<TR>
<TD width=&quot;15%&quot;><B>Owner:</B></TD>
<TD width=&quot;35%&quot;>JIMMY SMITH</TD>
<TD width=&quot;15%&quot;><B>Color:</B></TD>
<TD width=&quot;35%&quot;>GREY</TD></TR>
<TR>
<TD width=&quot;15%&quot;><B>Address:</B></TD>
<TD width=&quot;35%&quot;>33 YOUR ST</TD>
<TD width=&quot;15%&quot;><B>Open:</B></TD>
<TD width=&quot;35%&quot;>Yes</TD></TR>
<TR>
<TD width=&quot;15%&quot;> </TD>
<TD width=&quot;35%&quot;>NEW YORK</TD>
<TD width=&quot;15%&quot;><B>Open Hours:</B></TD>
<TD width=&quot;35%&quot;>9am-7pm</TD></TR>
<TR>
<TD width=&quot;15%&quot;> </TD>
<TD width=&quot;35%&quot;>NY XXXXX XXXX</TD>
<TD width=&quot;15%&quot;><B>Type:</B></TD>
<TD width=&quot;35%&quot;>BASIC</TD></TR>
<TR>
<TD width=&quot;15%&quot;><B>AREA:</B></TD>
<TD width=&quot;35%&quot;>555</TD>
<TD width=&quot;15%&quot;><B>Rating:</B></TD>
<TD width=&quot;35%&quot;>5.3</TD></TR>
<TR>
<TD width=&quot;15%&quot;><B>Hiring:</B></TD>
<TD width=&quot;35%&quot;>No</TD>
<TD width=&quot;15%&quot;><B>Buying:</B></TD>
<TD width=&quot;35%&quot;>Yes</TD></TR>
<TR>
<TD width=&quot;15%&quot;><B>Selling:</B></TD>
<TD width=&quot;35%&quot;>Yes</TD>
<TD width=&quot;15%&quot;><B>Trading:</B></TD>
<TD width=&quot;35%&quot;>No</TD></TR>
<TR>
<TD width=&quot;15%&quot;><B>A Units:</B></TD>
<TD width=&quot;35%&quot;>3</TD>
<TD width=&quot;15%&quot;><B>A Total:</B></TD>
<TD width=&quot;35%&quot;>13</TD></TR>
<TR>
<TD width=&quot;15%&quot;><B>B Units:</B></TD>
<TD width=&quot;35%&quot;>5</TD>
<TD width=&quot;15%&quot;><B>B Total:</B></TD>
<TD width=&quot;35%&quot;>11</TD></TR>
<TR>
<TD width=&quot;15%&quot;><B>C Units:</B></TD>
<TD width=&quot;35%&quot;>18</TD>
<TD width=&quot;15%&quot;><B>C Total:</B></TD>
<TD width=&quot;35%&quot;>33</TD></TR>
<TR>
<TD width=&quot;15%&quot;><B>D Units:</B></TD>
<TD width=&quot;35%&quot;>31</TD>
<TD width=&quot;15%&quot;><B>D Total:</B></TD>
<TD width=&quot;35%&quot;>111</TD></TR>
</TBODY></TABLE>
</DIV>
<TABLE cellSpacing=2 cellPadding=4 border=0 style=&quot;width :600px;&quot;>
<TBODY>
<TR style=&quot;background-color:#C0C0FF;&quot;>
<TD width=&quot;15%&quot;><B>Total:</B></TD>
<TD width=&quot;33%&quot;>1000 </TD>
<TD width=&quot;15%&quot;><B>Sub Total: </B></TD>
<TD width=&quot;37%&quot;>2001 </TD></TR>
</TBODY></TABLE>
</CENTER>
</FONT>
</BODY></HTML>




A word of warning, this will probably only work in the latest version browsers 5.5 and above. I tested it with IE6 and Netscape7 and it works like a charm.

(The more ASP.NET I do, the more Javascript I find myself using)
 
Thanks StuckInTheMiddle

It really helps a lot. Do you have any idea print long table, the table header and footer information may be repeated on each page that contains table data?
[peace]
 
Hi besiktas,

Can you give a little more information about what you mean by printing a long table. Are you expecting to fit a long table all on one page of printout? Or to split it over several pages each one with the same header/footer?

S.


(The more ASP.NET I do, the more Javascript I find myself using)
 
First all - StuckInTheMiddle thanks you for your great example.

Maybe you can help me to elaborate a little bit more complex issue.
I need the same example but not with the lock of the titles's top and bottom but by locking X (Top) & Y (left) titles.

for example, like in excel, I want to be able to lock the title on the top and on the left sides and &quot;travel&quot; in the matrix.

How i can do it ? (again - for ie and nscp)

Thanks you

 
Hi prophete,

Glad my example above was able to help you out somewhat. As for your extra 'matrix' requirements maybe because it;s spring break and my mind is elsewhere but I don't beleive you are going to be able to scroll vertically for left X no. of columns using this method.

Dynamic HTML i'm afraid isn't quite that dynamic ;) Have you thought about actually using the XL object in ASP, and outputting your data that way. You could then create an XL template setup as you want with the locked columns you need and populate it with your results in asp.net.

S.



(The more ASP.NET I do, the more Javascript I find myself using)
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top