Не удалось удалить интервал перед первым столбцом ячеек и после последней ячейки?

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 с, если вам не обязательно - будет также упрощать стиль вашей таблицы;
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>