CODEWITHSUNDEEP
css
user3310115
user3310115

Reputation: 1460

Adding margin to table makes it overflow the parent

I have a page which expands as the number of columns in the table increase. As long as I don't add a margin to the div containing the table, the page table doesn't overflow the parent. But when I add a margin-left:2px to the div containing the table, it overflows the parent. How can this be avoided?

.canvas{
    margin-left: 20%;
    display: inline-block;
    min-width: 60%;
}
.canvas .column-table {
    margin-left: 2%;
    margin-top: 2%;
    margin-bottom: 2%;
}
<div class="canvas">
    <div class="column-table">
        <table id="main-table">
            <tr id="row1">
            </tr>
            <tr id="row2">
            </tr>
        </table>
    </div>
</div>

Upvotes: 0

Views: 46

Answers (1)

Jonathan
Jonathan

Reputation: 6537

Using box-sizing: border-box; should solve this, I believe:

.canvas {
    margin-left: 20%;
    display: inline-block;
    min-width: 60%;
}
.canvas .column-table {
    box-sizing: border-box;
    margin-left: 2%;
    margin-top: 2%;
    margin-bottom: 2%;
}

If not, try box-sizing: content-box;

Upvotes: 1

Related Questions