display：table width + padding给出滚动条

Question

我需要为具有display:table的父div提供填充，但是当它具有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  
}

FIDDLE

Answer 1

用于box-sizing

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

<强> Live Demo

有关 box-sizing

的更多信息

有关 Box modules

的更多信息