html - display:table width+padding 给出滚动条

Question

我需要给父 div 填充，display:table但是当它width:100%添加填充时会导致水平滚动条，那么如何使用填充（但没有滚动条）使父 div 全宽到浏览器？

这是我的代码

.tbl{
    display:table;
    width:100%; padding:10px;
    background:#C99 
}
.row{
    display:table-row;
    width:100%
}
.cell{
    display:table-cell;
    border:solid 1px black  
}

小提琴

Answer 1

曾经box-sizing

.tbl{
box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}

现场演示

更多关于盒子尺寸的信息

更多关于Box 模块