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!

Register Log in
  • 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!

Scroll Bar Issue

Status
Not open for further replies.
stein555

stein555

Programmer
Apr 18, 2003
24
US
I am using this code as an example of what I am trying to do. It was posted earlier, so I just took it and modified it.

When you paste this code into an HTML file, the result is a table with scroll bars. Now, the bottom scroll bar is there to allow you to scroll the data left and right. The problem is, the vertical scroll bar has to be scrolled to in order to see and use.

Anyone have any ideas on how to make the vertical scrollbar available all the time?

<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>

<DIV style=&quot;height:280px;width:300px;overflow-x:scroll;&quot;>
<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>
</DIV>
</CENTER>
</FONT>
</BODY></HTML>
 
Sort by date Sort by votes
<html><body>
<div style=&quot;width:100px;height:100px;overflow:scroll&quot;>
<nobr>Your table text here. Your table text here.</nobr>
<nobr>Your table text here. Your table text here.</nobr>
<nobr>Your table text here. Your table text here.</nobr>
<nobr>Your table text here. Your table text here.</nobr>
<nobr>Your table text here. Your table text here.</nobr>
<nobr>Your table text here. Your table text here.</nobr>
<nobr>Your table text here. Your table text here.</nobr>
<nobr>Your table text here. Your table text here.</nobr>
</div>
</body></html>

Clive
 
Upvote 0 Downvote
That scrolls the whole table up and down. I only want what is in the middle to scroll vertically. The header at the top needs to stay at the top at all times...

I did see that post on the other forum, but it wasn't exactly what I was looking for... =/
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

k4ghg
  • Locked
  • Question
Liquid vertical bar 1
Replies
2
Views
172
k4ghg
k4ghg
makamo66
  • Locked
  • Question
Horizontal Scroll Bar Not Hidden for Media Query
Replies
3
Views
117
makamo66
makamo66
PSchubert
  • Locked
  • Question
Data in db table cell not displayed in asp table cell -- a CSS issue?
Replies
2
Views
145
vacunita
vacunita
GRIFFIJ
  • Locked
  • Question
Centering navigation bar
Replies
2
Views
116
vacunita
vacunita
c0deM0nK424
  • Locked
  • Question
Making bootstrap navigation bar links 'collapse' too soon ?
Replies
1
Views
112
vacunita
vacunita

Part and Inventory Search

Sponsor

Back
Top