divテーブルのオーバーフローがモバイルで意図したとおりに機能しない

Question

私はテーブルがサイズ比較チャートとして機能するdivテーブルレイアウトを持っています。テーブルの背景は高さの異なるグリッド線で構成され、テーブルには3つのセルが含まれます。高さの値を示す左手の凡例を表示するためのバッファスペースとして機能する空の左手セル、最初のアイテムのイメージセットには、テーブルにどれくらいの高さがあるのか​​を示すクラスが設定され、右端のセルには、テーブルにどのようなスケールを設定するべきかを示すクラスが含まれています。

私は、この静的なテーブルでかなりうまく機能している：

：

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> 

CSS

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

これは一つのことを除いて、携帯の画面上でかなりくそうまく機能

テーブルの境界線（および背景）は、電話機の最初の幅の周りにのみ表示されますスクリーン。言い換えると、表の幅はセルの内容を囲んでいないので、ユーザーが横にスクロールすると、背景が白くなり、境界の端が横にスライドします。

私は自分の質問が単純だと信じています。テーブルの全幅にわたってグリッド線が表示されるように、セルの内容を囲むようにテーブルの境界線（および背景）を取得するにはどうすればよいですか？

ポインタが評価されています。あなたが投票に行くなら、理由を説明する神経を持ってください。ありがとうございました。

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