html - div表中的单元格间距

Question

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

问题演示http://jsfiddle.net/EJBnm/

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

Answer 1

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

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

Answer 2

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

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