使用display：table限制元素内表格的宽度

Question

我在CSS中设置了display:table的div。当我在其中放置一个实际的table时，我想要水平滚动，外部div突破container并延伸到页面宽度。任何人都可以帮我解决这个问题吗？

我试图将容器保持固定宽度，不滚动。我只想拿着桌子滚动的div。

JSFIDDLE： http://jsfiddle.net/c0996dqe/

CSS：

.container{
    width:500px;
}
.answer{
    display: table;
    padding-bottom: 25px;
    border-bottom: 1px dotted #ccc;
    overflow: hidden;
}
.answer:before{
    display: table-cell;
    width: 5%;
    content: "A";
    font-size: 30px;
    height: 100%;
    padding-right: 25px;
}
.scorestable{
    display: block;
    white-space: nowrap;
    overflow-x: scroll !important;
    -webkit-overflow-scrolling: touch;
    padding-top: 25px;
}
.scorestable td{
    border: 1px solid #ccc;
    padding: 5px;
    min-width: 65px;
    text-align: center;
    font-size: 14px;
}

Answer 1

将这些样式添加到.answer：

.answer {
  table-layout: fixed;
  width: 100%;
}

Fiddle

Answer 2

.scorestable{
    width:500px;
}

.container{
    width:500px;
    overflow:hidden;
}