div 테이블 오버 플로우가 모바일에서 의도 한대로 작동하지 않습니다.

Question

테이블이 크기 비교 차트 역할을하는 div 테이블 레이아웃이 있습니다. 테이블의 배경은 다양한 높이의 그리드 선으로 이루어져 있으며 표에는 세 개의 셀이 있습니다. 높이 값을 나타내는 왼손잡이 범례를 볼 수있는 버퍼 공간 역할을하는 빈 왼손 셀, 첫 번째 셀이있는 중간 셀 아이템의 이미지 세트는 테이블에 얼마나 큰지 알려주고, 가장 오른쪽 셀은 테이블에 있어야하는 스케일을 알려주는 클래스가있는 두 번째 이미지 세트를 보여줍니다.

내가 가진이 정적 테이블에 매우 잘 작동 :

HTML

<div id="scalechart"> 
    <div id="buffer"></div> 
    <div id="nochoice"> 
    <img src="http://www.example.com/image1.png" class="leader"> 
    </div> 
    <div id="firstchoice"> 
    <img src="http://www.example.com/image2.png" class="leader"> 
    </div> 
</div> 

이 한 가지를 제외하고 모바일 화면에 잘 무척 작동

#scalechart { 
    display: block; 
    width: 100%; 
    border: 2px solid grey; 
    height: 500px; 
    background: url(../../legend.png) no-repeat, url(../../Gridlines.png) repeat-x; 
    background-size: contain; 
    clear: both; 
    white-space: nowrap; 
} 

#buffer { 
    width: 144px; 
    position: relative; 
    display: inline-block; 
    height: 100%; 
} 

#nochoice, #firstchoice { 
    display: inline-block; 
    vertical-align: bottom; 
    text-align: center; 
} 

.leader { 
    height: 381px; 
} 

CSS :

테이블 테두리 (및 배경)는 전화기의 초기 폭 주위에서만 나타납니다 화면. 즉, 표의 너비가 셀의 내용을 둘러 쌀 수 없기 때문에 사용자가 측면으로 스크롤하면 배경이 흰색이고 가장자리가 측면으로 미끄러집니다.

내 질문은 간단합니다 믿습니다 : 사용자가 테이블의 전체 너비를 통해 눈금 선을 볼 수 있도록 셀 내용을 둘러싸도록 표 테두리 (및 배경)를 어떻게 얻을 수 있습니까?

포인터가 인정됩니다. 투표를 거치려면 이유를 설명 할 수있는 신경을 가져야합니다. 고맙습니다.

Answer 1

나는 다음과 같은 솔루션에 온 :

CSS :

#scalechart { 
    overflow-x: auto; 
    overflow-y: hidden; 
    display: block; 
    width: 100%; 
    border: 2px solid grey; 
    height: 500px; 
    background: url(../../legend.png) no-repeat, url(../../uploads/Transformers/Gridlines.png) repeat-x; 
    clear: both; 
    white-space: nowrap; 
    background-size: contain; 
} 

#nochoice, #firstchoice { 
    display: inline-block; 
    vertical-align: bottom; 
    text-align: center; 
} 

.leader { 
    height: 386px; 
} 

#buffer { 
    width: 130px; 
    position: relative; 
    display: inline-block; 
    height: 100%; 
}