Html 为什么x-scroll不工作？

当我试图将窗口调整到较小的大小时，x-scroll表格有问题。我有相同的表格和相同的css，它不包含带有图像的行，而且效果很好

HTML:

JSFiddle：

---

为什么会这样？

您必须使用宽度才能滚动到

  work.price_wrapper {
      overflow-x: autol;
      overflow-y: auto;
      max-width: 400px;
      width: 100%;
 }

---

不要使用scroll，因为它在ie中无法工作，因此您可以使用auto，并设置最大宽度或宽度以启用自动滚动功能。如果您的内容没有溢出，您使用的是其容器的90%宽度。。滚动时不会出现溢出

800px含量

table.price {
    width: 800px;
    margin: 10px 5%;
    border-collapse: collapse;
    background-color: #FFF;
}

400px容器

.price_wrapper {
    overflow-x: scroll;
    overflow-y: visible;
    width: 400px;
}

这将强制内容比包装更宽。。哪个有溢出x

正如另一个答案正确建议的那样，使用overflow:auto

下面是一个更新版本，它将强制溢出以向您展示一个示例

---

正如你所看到的，我强迫孩子比父母宽。。因此提供卷轴

嗯，没有内容溢出。。。。。。所以没有什么可以滚动…因为你的内容是以相对于其父内容的百分比设置的。当内容永远不会超过其父内容时，您不需要滚动条。虽然您对IE的评论是正确的，但为什么您认为最大宽度作为固定值，宽度作为百分比会起作用？如果该值小于最大宽度，那么空间将被无意识占用这不是问题所在，我认为你对最大宽度和宽度百分比的理解是错误的。。我想你误解了我告诉你的话，我要给你一把小提琴

table.price {
    width: 800px;
    margin: 10px 5%;
    border-collapse: collapse;
    background-color: #FFF;
}

.price_wrapper {
    overflow-x: scroll;
    overflow-y: visible;
    width: 400px;
}