Table within a scrolling div: Fill div, but prevent unnecessary horizontal scrollbar

Question

div.GridViewScrollContainer
{
    overflow:auto;
    position: relative;
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}

div.GridViewScrollContainer table
{
    border-spacing:0;
    margin:0;
    border-collapse:collapse;
    padding:0;
}

So, I render a table within a div inside some height/width contrained relatively positioned element. Most of the time the .GridViewScrollContainer scrolls vertically very nicely.

However, sometimes my table only has one or two columns and there is space between the table and my vertical scrollbar which looks funny. I just want my table to fill up the entire horizontal space within ".GridViewScrollContainer".

So, to accomplish that I added "width:100%" to my "div.GridViewScrollContainer table" definition. That worked except that when the div has a vertical scrollbar there would also now be a horizontal scrollbar that is just for scrolling the width of the vertical scrollbar.

Next, instead of the "width:100%", I tried to fix it with the following script, which works most of the time, but DHTML/AJAX means that I need to call the script in a variety of situations and I can't find them all.

$(function() {
    $("div.GridViewScrollContainer table").each(function() {
        if ((this.offsetParent.scrollWidth - this.clientWidth) > 2)
            $(this).width("100%");
    });
});

Finally, I found the following question that appears to be the same type of situation as mine, but there isn't really an answer. Related Question.. Does anyone have any idea... I just want to fill the div width wise and only have vertical/horizontal scrollbars when necessary. Thank you very much.

IE7 ONLY!

Answer 1

There is no clean solution with CSS, unfortunately. You can design for a pixel-perfect layout, and just set the width to a specific number of pixels; you can fudge it with width: 95%; or you can live with scrollbars. Unfortunately, I think those are your best bet.

Answer 2

You can use CSS to hide the horizontal scrollbar. Use the following CSS on your container DIV:

overflow-x: hidden;

This will eliminate the horizontal scrollbar caused by the table. Just make sure the table doesn't overflow the width of the parent DIV.