div表中的单元格间距答案

【问题标题】：Cell spacing in div tablediv表中的单元格间距
【发布时间】：2013-03-01 22:29:32
【问题描述】：

我希望每个单元格之间有 4 个左右的像素空间。我希望灰色标题有空格而不是灰色块。我试着玩弄（背景剪辑：填充框；填充：14像素；边距等），但不知道如何在 div 表中的单元格之间放置几个像素。我该怎么做？

<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>

CSS：

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

【问题讨论】：

使用表格存储表格数据！！！！！！
好了。为什么要使用一堆div？桌子擅长一件事……制作桌子。这就是你正在做的。
逻辑关联数据的网格是一个表格，所以使用TABLE标签是完全合适的。
基于所有这些 cmets 我想知道为什么 display: table 存在......
我想补充一点，有时（很少）有充分的理由使用 div 创建表。例如，如果您希望简单表格的布局创建一个弹出菜单（一列用于图标，第二列用于文本），但您不希望父表中的样式级联到菜单.使用 div（表格格式）创建菜单是一种简单的解决方法。

标签： html css css-tables

【解决方案1】：

将border-spacing: 4px; 添加到您的.TableBox 类而不是您的<tr>

小提琴：http://jsfiddle.net/EJBnm/1/

【讨论】：

@Leeish：查看我对主要问题的评论，但是......我在做什么有什么问题？（答案是一切吗？）-edit- 是很难找到对间距等简单事物的参考的答案...
@BruteCode... 你正在强迫 div 制作一个表格，这很疯狂，因为 HTML 具有表格功能。你为什么不使用它？像您这样的开发人员是我必须编辑 span 元素行的原因，而不仅仅是表格数据的表格。
@Leeish：为什么要编辑跨度行？是不是因为你不知道 css 做你想做的事？ ;)（我承认我不知道这是什么，谷歌搜索给了我可怕的结果）
基本上是因为我们的老开发人员不得不使用大量的 CSS 行来使跨度像表格一样。是的，当强制跨度做一些我认为它从未设计过的事情时，很难让 CSS 做你想做的事情。

【解决方案2】：

您可以使用透明（或白色边框）代替边距：http://jsfiddle.net/jfsWc/

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

【讨论】：