창 크기를 조정할 때 테이블 스크롤 막대가 사라짐

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

사실을 변경할 경우 오버 플로우 엑스 : 스크롤하거나 자동으로 문제를 해결해야한다. 그것이 숨겨져 있기 때문에 그들은 아마 그들의 불만 인 스크롤 막대에 접근 할 수 없다.

다른 옵션은 화면 해상도를 확인한 후 다른 테이블로 바꾸거나 작은 이미지로 바꾸는 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

변경 CSS에서 oversflow 행동이 항상 같이 표시합니다 :

나중에이 페이지를 방문하는 사람들에게 참고로

Answer 3

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

, 여기에 최종 코드가 있습니다 :

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