无法删除第一列单元格之前和最后一个单元格之后的空格？

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>