向表添加边距使其溢出父节点

Question

我有一个页面随着表格中列数的增加而扩展。只要我没有为包含表格的div添加边距，页面表格就不会溢出父页面。但是当我向包含该表的margin-left:2px添加div时，它会溢出父级。如何避免这种情况？

＆＃13;

＆＃13;

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

＆＃13;

<div class="canvas">
    <div class="column-table">
        <table id="main-table">
            <tr id="row1">
            </tr>
            <tr id="row2">
            </tr>
        </table>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用box-sizing: border-box;应该解决这个问题，我相信：

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

如果没有，请尝试box-sizing: content-box;