ウィンドウのサイズ変更時にテーブルのスクロールバーが消える

Question

私は電子商取引サイトのバックオフィス用のテーブルを作った。 http://img690.imageshack.us/img690/6483/screenshot20110917at819.png

テーブルの内容（tbody）の高さは固定されており、ブラウザのウィンドウのサイズを変更すると、このテーブルのスクロールバーに問題が発生します。 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

実際にあなたがオーバーフロー-Xを変更する場合：スクロールまたは自動で問題が解決しなければなりません。それは隠されているので、おそらく彼らの苦情であるスクロールバーにアクセスすることはできません。

もう1つの選択肢は、画面の解像度をチェックし、次にテーブルを別のテーブルに置き換えるか、画像をより小さな画像に置き換えるjavascriptまたはjqueryを実行することです。これにより、テーブルは最大化されていないウィンドウに表示されるようにサイズを変更することができます。

/---- EDIT ----/

チェックウィンドウのリサイズ（あなたも、あなたが要素の上にそれを行うことができ、ウィンドウ上でこれを行う必要はありませんが、窓はあなたに多くを与えるだろう彼らは自分のウィンドウをリサイズしているかどうかについての正確な読み取り

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

変更いつものように、表示するCSSからoversflow行動：。

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

Answer 3

を後でこのページを訪問する人には参考のため、ここに最終的なコードがあります：

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