View Full Version : Need help with scrolling div around table with growing content

08-26-2010, 05:46 PM
I want a table's height to grow and scroll as the rows are dynamically added.

I am currently using the following but the scroll bar won't show without a fixed height:
overflow: auto;

But, when the fixed height is used that causes the problem with the div being huge and waiting for content.

Ideally, the table would scroll after 10 rows are created.

Is there a way for the div to collapse and just grow vertically as the table grows and after 10 rows begin scrolling?

08-26-2010, 08:18 PM
wrap a div around the table like this:

<div style="overflow:auto; height:500px;"></div>

set height and or width to whatever you need

Dont for get to put the closing div tag after the </table> tag. Hope that helps.

08-26-2010, 08:22 PM
Thank you for such a quick reply.
Unfortunately when I apply a 500px height, the div is fixed at 500px height and takes up that much space on the page.

I need the div to be, for the lack of a better phrase, "flat" until the div is filled in dynamically with rows. Basically grow as needed.

08-26-2010, 09:14 PM
Thats what I had the height set as in my page. Play around with it for your own personal preference.

08-26-2010, 09:16 PM
I have a script on my page that allows 100 rows with navigation links to page through each 100 records in my databse. Maybe something else to look at.

08-26-2010, 09:17 PM
I think you misunderstood what I meant with my post. What I am trying to say is that I don't need a height attribute of any value on my page unless there is a way to make it collapse to zero and grow as needed. If I use any fixed height value the div stays that large and then scrolls after that.

08-27-2010, 01:25 AM
MAybe I did misunderstand, sorry. The way I have my page is when I perform a dynamic search, and 20 rows are returned in a dynamic table then it doesnt need or contain a scroll bar. If the results are returned and there are more rows than the div will allow, then the scroll bar will be utilized. Maybe post your code and explain again what you want, or post a site that contains the exact thing you're looking for. Sorry again for the misunderstanding. Good luck.