CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Shane
Shane

Reputation: 5677

How can i make table layout width equivalent to container width

I have a table layout inside my container-fluid. How can i make table layout width equivalent to container width. 

<div class="container-fluid">
    <div class="table-layout">
        <div class="table-cell fixed-width-100">
            <p>fixed width div</p>
        </div>
        <div class="table-cell">
            <p>fluid width div</p>    
        </div>
        <div class="table-cell fixed-width-100">
            <p>fixed width div</p>    
        </div>
    </div>
</div>

.table-layout {
 display:table;
    width:100%;
}
.table-layout .table-cell {
    display:table-cell;
    border:solid 1px #ccc;
}

.fixed-width-100 {
    width:100px;
    overflow-y:scroll;
}

How can i make table layout width equivalent to container width. There is some padding and margin on both the sides. Attached is screen-shot.

enter image description here

Upvotes: 0

Views: 252

Answers (1)

web-tiki
web-tiki

Reputation: 103790

I think your issue comes from padding or margin on the <body> tag. Add :

html,body{
    margin:0;
    padding:0;
}

DEMO

Upvotes: 1

Related Questions