CSS表格/表格单元格和填充？

我想知道为什么在“display:table；”上使用填充并不像我预期的那样工作；-）

.table{
显示：表格；
宽度：100%；
背景：耐火砖；
颜色：白色；
填充：10px；
}
.表格单元格{
显示：表格单元格；
背景：海格林；
}
为什么填充物像屎一样工作？

以下是JSFIDLE：

正如您所看到的，“padding:10px；“on”.table”导致的表格比框架大。。。此时会出现水平滚动条

为什么会有这样的反应？？我不想要一个解决办法，因为我有一个，但我真的想知道为什么

谢谢，

---

Bastien

使用CSS设置元素的宽度和高度属性时，只需设置内容区域的宽度和高度。要计算元素的完整大小，还必须添加填充、边框和边距

---

参考：

将框大小设置为边框框将解决您的问题：

用小提琴来检查一下：

---

可以在表格元素上使用边框间距而不是填充（表格的长方体模型行为不同）

---

因为不同浏览器之间的框模型不同。Firefox、Chrome、Safari和Opera在计算宽度时将不包括填充。我会的你为什么用divs做桌子？@David Nguyen:那是15年前的事了。除非你仍然依赖IE5怪癖模式，否则就不是今天。@PlaTyPuS没问题！

.table {
    display: table;
    width: 100%;
    background: firebrick;
    color: white;
    padding: 10px;
}
.table-cell {
    display: table-cell;
    background: seagreen;
}

<div class="table">
  <div class="table-cell">
    Why is the padding working like shit?
  </div>
</div>

.table {
    display: table;
    width: 100%;
    background: firebrick;
    color: white;
    padding: 10px;
    box-sizing: border-box; /* this guy!! */
}
.table-cell {
    display: table-cell;
    background: seagreen;
}

border-spacing:10px;