無法刪除第一列單元格之前和最後一個單元格之後的空格？

Question

我無法刪除左上角&左下角單元格之前和右側單元格之後的間距。

我想單元格只能在中間使用邊框間距的屏幕全寬度。

JSFiddle link

#div-layout, 
 
#div-layout-nested { 
 
    display: table; 
 
    width: 100%; 
 
    border-spacing: 5px; 
 
} 
 
#div-layout-nested { 
 
    margin-top: -5px; 
 
    margin-bottom: -5px; 
 
} 
 
.div-layout-row { 
 
    display: table-row; 
 
} 
 
.div-layout-cell { 
 
    display: table-cell; 
 
    width: 25%; 
 
    vertical-align: top; 
 
    border: 1px solid red; 
 
    background-color: #ffb2b2; 
 
}

<div id="div-layout"> 
 
    <div class="div-layout-row"> 
 
    <div id="div-layout-nested"> 
 
     <div class="div-layout-row"> 
 
     <div class="div-layout-cell">Top Left</div> 
 
     <div class="div-layout-cell">Top Middle</div> 
 
     <div class="div-layout-cell">Top Right</div> 
 
     </div> 
 
    </div> 
 

 
    <div id="div-layout-nested"> 
 
     <div class="div-layout-row"> 
 
     <div class="div-layout-cell">Botom Left</div> 
 
     <div class="div-layout-cell">Bottom Middle</div> 
 
     <div class="div-layout-cell">Bottom Right</div> 
 
     </div> 
 
    </div> 
 

 
    <div class="div-layout-cell">Right</div> 
 

 
    </div> 
 
</div>

Answer 1

你可以得到最那裏的方式，加入：

body, 
#div-layout, 
.div-layout-row, 
.div-layout-cell { 
margin: 5px 0; 
} 

#div-layout, 
.div-layout-row, 
.div-layout-cell 
#div-layout-nested { 
border-spacing:0 0; 
} 

在您的樣式底部。

我懷疑你會發現表更容易風格，如果你重寫它。

目前您有兩個.div-layout-row s，每個嵌套在一個#div-layout-nested中，兩者本身嵌套在.div-layout-row之內。

三項建議：

1. 減少嵌套層次會讓你的表更容易的風格;
2. 始終如一地使用.class es有利於#id s - 一個很好的經驗法則是絕對不會使用#id s，除非您絕對必須 - 也將使您的表更易於風格化;
3. 避免給出不同的嵌套層次.class - 這也將使您的表更容易風格。

這裏又是你的表標記不變，但與上面的樣式添加到樣式表的末尾：

#div-layout, 
 
#div-layout-nested { 
 
    display: table; 
 
    width: 100%; 
 
    border-spacing: 5px; 
 
} 
 
#div-layout-nested { 
 
    margin-top: -5px; 
 
    margin-bottom: -5px; 
 
} 
 
.div-layout-row { 
 
    display: table-row; 
 
} 
 
.div-layout-cell { 
 
    display: table-cell; 
 
    width: 25%; 
 
    vertical-align: top; 
 
    border: 1px solid red; 
 
    background-color: #ffb2b2; 
 
} 
 

 
body, 
 
#div-layout, 
 
.div-layout-row, 
 
.div-layout-cell { 
 
margin: 5px 0; 
 
} 
 

 
#div-layout, 
 
.div-layout-row, 
 
.div-layout-cell 
 
#div-layout-nested { 
 
border-spacing:0 0; 
 
}

<div id="div-layout"> 
 
    <div class="div-layout-row"> 
 
    <div id="div-layout-nested"> 
 
     <div class="div-layout-row"> 
 
     <div class="div-layout-cell">Top Left</div> 
 
     <div class="div-layout-cell">Top Middle</div> 
 
     <div class="div-layout-cell">Top Right</div> 
 
     </div> 
 
    </div> 
 

 
    <div id="div-layout-nested"> 
 
     <div class="div-layout-row"> 
 
     <div class="div-layout-cell">Botom Left</div> 
 
     <div class="div-layout-cell">Bottom Middle</div> 
 
     <div class="div-layout-cell">Bottom Right</div> 
 
     </div> 
 
    </div> 
 

 
    <div class="div-layout-cell">Right</div> 
 

 
    </div> 
 
</div>