CODEWITHSUNDEEP
htmlcss
zer0
zer0

Reputation: 5017

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

Upvotes: 0

Views: 43

Answers (2)

yuk
yuk

Reputation: 933

.scorestable{
    width:500px;
}

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

Upvotes: 0

Rick Hitchcock
Rick Hitchcock

Reputation: 35670

Add these styles to .answer:

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

Fiddle

Upvotes: 3

Related Questions