html - 显示 :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