Cell spacing in div table

问题

I'd like the there to be 4 or so pixel space between each cell. I'd like the grey header to have the spaces rather then a block of grey. I tried playing around ( background-clip:padding-box; padding: 14px; margin etc) but couldn't figure out how to put a few pixels between cells in a div table. How do I do this?

Demo of problem 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}

回答1:

Add border-spacing: 4px; to your .TableBox class instead of your <tr>

Fiddle: http://jsfiddle.net/EJBnm/1/

回答2:

You can use a transparent (or white border) instead of margin: http://jsfiddle.net/jfsWc/

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

来源：https://stackoverflow.com/questions/15167943/cell-spacing-in-div-table