Question

I made a table for the back-office of an e-commerce site. The table content (tbody) has a fixed height and it is scrollable through a scrollbar on the right-hand side as depicted in this picture: http://img690.imageshack.us/img690/6483/screenshot20110917at819.png

The problem is that if I resize the browser window, this table scrollbar diseappears: http://img26.imageshack.us/img26/4919/screenshot20110917at820.png

I know this is supposed to be normal behavior, but my customer insists to keep the table scrollbar even when resizing the window. Is there a way to implement this behavior?

Here is the css for reference: (the table body’s class is scrollContent)

/* define height and width of scrollable area. Add 16px to width for scrollbar */
div.tableContainer {
    clear: both;
    overflow: auto;
    width: 100%; 
}

/* set table header to a fixed position. WinIE 6.x only                                           */
/* In WinIE 6.x, any element with a position property set to relative and is a child of           */ 
/* an element that has an overflow property set, the relative value translates into fixed.    */
/* Ex: parent element DIV with a class of tableContainer has an overflow property set to     auto */
thead.fixedHeader tr {
    position: relative
}

/* set THEAD element to have block level attributes. All other non-IE browsers                */
/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
html>body thead.fixedHeader tr {
    display: block;
    width: 100%
}

/* define the table content to be scrollable                                                  */
/* set TBODY element to have block level attributes. All other non-IE browsers            */
/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
/* induced side effect is that child TDs no longer accept width: auto                     */
html>body tbody.scrollContent {
    display: block;
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
}

Answer 1

Actually you if you change the overflow-x: scroll or auto should resolve the problem. Since it’s hidden they can’t access the scroll bar which is probably their complaint.

The other option would be to run a javascript or jquery that would check for screen resolution and then replace the table with a different table or replace the images with smaller images. This would allow the table to resize down so that it could display in the non-maximized window.

/—- EDIT —-/

Check window resize (you also don’t have to do this on the window you can do it on an element but the window will give you a more accurate read on whether they have resized their window.

var timerID = 0,
var winWidth = $(window).width(),
var winHeight = $(window).height();

$(document).ready(function()
{
    $(window).resize(function()
    {
        var winNewWidth = $(window).width(),
            winNewHeight = $(window).height();
        if(winWidth != winNewWidth || winHeight != winNewHeight)
        {
            window.clearTimeout(timerID);
            timerID = window.setTimeout(function()
            {
                // do something here
            },100)
        }
        winWidth = winNewWidth;
        winHeight = winNewHeight
    });
});