Html div表溢出无法在移动设备上正常工作

我有一个div表布局，其中表用作大小比较图。表格的背景由不同高度的网格线组成，表格包含三个单元格：一个空白的左侧单元格，用作缓冲空间，用于查看表示高度值的左侧图例，中间的单元格，第一个项目的图像集带有一个类，告诉它在表中的高度，最右边的单元格显示第二个图像集，该图像集带有一个类，告诉它在表中的比例

在静态表中，我可以很好地实现这一点：

HTML

这在手机屏幕上非常有效，除了一件事：

表格边框（和背景）仅显示在手机屏幕的初始宽度周围。换句话说，表格上的宽度不会环绕单元格上的内容，因此当用户滚动到一侧时，背景为白色，边框边缘滑到一侧

我相信我的问题并不简单：如何让表格边框（和背景）包围单元格内容，以便用户在表格的整个宽度内看到网格线

---

欢迎指点。如果你要否决投票，那就有勇气解释原因。多谢各位

我得出了以下解决方案：

CSS:

---

你能创建小提琴以便我们诊断它吗？

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

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