Html div表中的单元格间距

我希望每个单元格之间有4个左右的像素空间。我希望灰色标题有空格，而不是一块灰色。我试着到处玩（背景剪辑：padding box；padding:14px；margin等），但不知道如何在div表的单元格之间放置一些像素。我该怎么做

问题演示

---

添加

边框间距：4px

到您的

.TableBox

类，而不是您的

小提琴：

您可以使用透明（或白色边框）代替边距：

---

使用表格数据！！！！！！好了。为什么他妈的要用一堆div？桌子擅长一件事。。。做桌子。这就是您正在做的。逻辑关联数据的网格是一个表，因此使用表标记是完全合适的。基于所有这些注释，我想知道为什么

display:table

存在……我只想补充一点，有时（很少）有很好的理由创建带有div的表。例如，如果希望简单表格的布局创建一个弹出菜单（一列为图标，第二列为文本），但不希望父表格中的样式级联到菜单。用div（表格格式）创建菜单是一个简单的解决办法。@Leeish：请参阅我对主要问题的评论，但。。。我现在做的有什么问题吗？（答案是万能的吗？）-edit-答案是很难找到像间距这样简单的东西的参考…@BruteCode。。。您正在强制div生成一个表，这很疯狂，因为HTML具有表功能。你为什么不使用它？像您这样的开发人员是我不得不编辑

span

元素行而不仅仅是表格数据的原因。@Leeish:为什么必须编辑span行？是不是因为你不知道该怎么做（我承认我不知道这是什么，谷歌搜索给了我可怕的结果）基本上是因为我们的老开发人员不得不使用大量的CSS行，只是为了让跨距看起来像表格。是的，当强制一个span做一些我认为它从来没有设计过的事情时，让CSS做你想做的事情是非常困难的。

<div class="TableBox">
    <div>
        <div>Head</div> <div>Bigger Head</div> <div>Medium</div>
    </div>
    <div>
        <div>First</div> <div>Second</div> <div>Third</div>
    </div>
    <div>
        <div>First</div> <div>Second</div> <div>Third</div>
    </div>
    <div>
        <div>First</div> <div>Second</div> <div>Third</div>
    </div>
</div>

.TableBox {display: table;}
.TableBox > div {display: table-row; border-spacing: 5px}
.TableBox > div >div {display: table-cell;  margin: 4px;}
.TableBox > div:nth-child(even){ color: red; }
.TableBox > div:nth-child(1){  background-color: #666666; color:white; border-spacing: 15px; background-clip:padding-box; padding: 14px; margin:0 20px}

.TableBox > div >div {display: table-cell;  border:4px solid transparent}