Is there a way to add some space between cells in a div table without creating a solid grey block for the header? I've tried using background-clip:padding-box; padding: 14px; margin, but couldn't achieve the desired result. How can I create a few pixels gap between cells in a div table?
View the issue here
<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}