在div表中的單元格間距

我希望每個單元格之間有4左右的像素空間。我希望灰色標題有空格而不是灰色塊。我試着玩弄（background-clip：padding-box; padding：14px; margin等），但無法弄清楚如何在div表中的單元之間放置幾個像素。我該怎麼做呢？在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}

來源

2013-03-01 BruteCode

+10

使用表的表格數據!!!!!! – 2013-03-01 22:29:58

有你去。爲什麼地獄使用一堆divs？表格擅長一件事......製作表格。這是你正在做的。 – Leeish 2013-03-01 22:30:58

邏輯關聯數據的網格是一個表，因此使用TABLE標記是完全合適的。 – 2013-03-01 22:30:59

添加border-spacing: 4px;您.TableBox類，而不是你的<tr>

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

來源

2013-03-01 22:32:28 Adrift

不要鼓勵他。 – Leeish 2013-03-01 22:33:40

@Leeish：看到我對主要問題的評論，但...我在做什麼錯？（答案是什麼？） - 編輯 - 是很難找到簡單的東西，如間距的參考答案... – BruteCode 2013-03-01 22:36:54

我會接受這個，但是SO還是不讓我 – BruteCode 2013-03-01 22:37:44

您可以ü瑟透明（或白色邊框），而不是保證金：http://jsfiddle.net/jfsWc/

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

來源

2013-03-01 22:34:35 Oliver

在div表中的單元格間距

回答

相關問題