Q:

Limit width of a table within an element with display:table

I have a div that is set to display:table in CSS. When I place an actual table inside this, which I want to scroll horizontally, the outer div breaks out of the container and extends to page width. Can anyone help me fix this?
I'm trying to keep the container to a fixed width, no-scroll. I want just the div holding the table to scroll.
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;
}

A:

Add these styles to .answer:
.answer {
  table-layout: fixed;
  width: 100%;
}

Fiddle

