Таблица прокрутки исчезает при изменении размера окна

Question

Я сделал стол для бэк-офиса сайта электронной коммерции.Содержимое таблицы (tbody) имеет фиксированную высоту, и его можно прокручивать с помощью полосы прокрутки с правой стороны, как показано на этом рисунке: http://img690.imageshack.us/img690/6483/screenshot20110917at819.png

Проблема заключается в том, что если я изменю размер окна браузера, этоисчезает полоса прокрутки таблицы: http://img26.imageshack.us/img26/4919/screenshot20110917at820.png

Я знаю, что это нормальное поведение, но мой клиент настаивает на том, чтобы полоса прокрутки таблицы сохранялась даже при изменении размера окна.Есть ли способ реализовать это поведение?

Вот CSS для справки: (класс тела таблицы 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

На самом деле вы, если вы измените overflow-x: scroll или auto, должны решить проблему. Поскольку он скрыт, они не могут получить доступ к полосе прокрутки, что, вероятно, является их жалобой.

Другой вариант - запустить javascript или jquery, который будет проверять разрешение экрана, а затем заменить таблицу другой таблицей или заменить изображения меньшими. Это позволило бы уменьшить размер таблицы, чтобы она могла отображаться в не развернутом окне.

/ ---- РЕДАКТИРОВАТЬ ---- /

Проверьте изменение размера окна (вам также не нужно делать это в окне, вы можете сделать это на элементе, но окно даст вам более точное представление о том, изменили ли они размеры своего окна.

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
    });
});

Answer 2

Для ссылки на тех, кто посетит эту страницу позже, вот окончательный код:

var winWidth = $(window).width();
var winHeight = $(window).height();
var winWidthDiff = 0;
var winHeightDiff = 0;
$i('scrollContent').style.maxWidth= ((winWidth-16)+"px");
$(window).resize(function(){
        var winNewWidth = $(window).width();
        var winNewHeight = $(window).height();
        winWidthDiff = winNewWidth - winWidth;
        winHeightDiff = winNewHeight - winHeight;
        winWidth = winNewWidth;
        winHeight = winNewHeight;
        scrollWidth = scrollWidth + winWidthDiff;
        scrollHeight = scrollHeight + winHeightDiff;
        $i('scrollContent').style.maxWidth= ((winWidth-16)+"px");
});

Answer 3

Измените поведение переполнения из CSS, чтобы оно всегда отображалось, например:

html>body tbody.scrollContent {
    display: block;
    overflow-y: scroll; //this will make sure to always display the scrollbar, whether it's active (available for scrolling) or not.
    overflow-x: hidden;
    width: 100%;
}