Div with scroll bar showing mysql data?

RiemenDesign
RiemenDesign used Ask the Experts™
on
Can I have a div area with a scroll bar?  Similar to an iframe I suppose, but I am not pulling in another file.

I am pulling in mysql data and would like it to look like an iframe.

Thoughts?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Commented:
Put the table into a <div></div> and define your width,height dimensions and overflow:scroll;

Then the container will be scrollable.

For example:

<div style="width:500px;height:100px;overflow:scroll;">
<table style="width:100%;" border=1>
<tr><th>col1</th><th>col2</th></tr>
<tr><td>Content</td><td>Content</td></tr>
<tr><td>Content</td><td>Content</td></tr>
<tr><td>Content</td><td>Content</td></tr>
<tr><td>Content</td><td>Content</td></tr>
<tr><td>Content</td><td>Content</td></tr>
<tr><td>Content</td><td>Content</td></tr>
<tr><td>Content</td><td>Content</td></tr>
<tr><td>Content</td><td>Content</td></tr>
</table>
</div>
Just to clarify, you don't NEED a table.  Any HTML will work.  You can do a whole bunch of  tags if you want.

If you want the scroll bars not to show when there is "not enough" content, you can use overflow: auto;
<style type="text/css">

.scrollDiv {
    width: 500px;
    height: 300px;
    overflow: auto;
}

</style>


<div class="scrollDiv">

Content
<br />
<br />
<br />
<br />
<br />
More Content
<br />
<br />
<br />
<br />
<br />
Even More Content
<br />
<br />
<br />
<br />
<br />
Way too much Content

</div>

Open in new window

Author

Commented:
That works great, but is there a way to remove the scroll on the bottom?  Even if I make the div big enough, it shows this really ugly border on the bottom.

Screen shot is attached.

Thanks!
Screen-shot-2010-07-06-at-11.20..png
Use overflow:auto to only show the scrollbars you need.

Also, if you want to style your scrollbar, you can use this really cool jQuery plugin:

http://code.google.com/p/jscrollpane/

Author

Commented:
Got it.  Thanks!!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial