Question

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

我在静态表中运行得相当好：

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

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

1 个答案: