İlk öğeden önce ve son öğeden sonra kenar aralığı yoktur

Question

Sahte bir masam var. Aralarında boşluk oluşturmak için kenar boşluk özelliğini kullanıyorum. Ancak bu, ilk hücreden önce ve son hücreden sonra da boşluk oluşturur.

Yalnızca bu iki sütun arasında bir alan oluşturmak istiyorum.

HTML:

<div class="table"> 
    <div class="cell"></div> 
    <div class="cell"></div> 
</div> 

CSS:

.table { 
    display: table; 
    width: 100%; 
    border-spacing: 11px 0; 
    border: 1px solid #222; 
} 

.cell { 
    display: table-cell; 
    width: 50%; 
    height: 20px; 
    border: 1px solid #999; 
    background: #ccc; 
} 

JSFiddle: CSS içinde tablolar için spec bakarsak http://jsfiddle.net/ACH2Q/

Answer 1

, sen border-spacing homojen geçerli olduğunu orada bulacaksınız, ekleyerek table-cell öğelerinize bir kenar boşluğu göz ardı edilir.

Yani oldukça kirli kesmek hariç display: table ile div s kullanarak sorununuza hiçbir temiz çözüm gibi görünüyor (ben "boşluk div'leri" kullanarak bu one bulundu).

Ancak bunun yerine "gerçek" bir tablo kullanmanız uygunsa, oldukça kabul edilebilir bulduğum bir çözümü kullanabilirsiniz. Orijinalinizin bu jsFiddle güncellemesine bakın.

<table> 
    <tr> 
     <td></td> 
     <td></td> 
     <td class="last"></td> 
    </tr>   
</table> 

fikri iç td s diplay:inline-block tekrar marjlar onları duyarlı hale getirir yapmaktır:

biçimlendirme

(Ben bir sütun eklenmiştir). Daha sonra, tüm td s'yi seçen ancak ilkini seçen bir CSS seçici kuralı td + td uygularsınız. "İç boşluk" u almak için bu öğelere margin-left uygulayın. Son olarak, float:right'a doğru tablo kenarına eklemeniz için son sütuna sahip olmanız gerekir.

table { 
    width: 100%; 
    border: 5px solid #222; 
    border-collapse: separate; 
} 

td + td { 
    margin-left: 8%; 
} 

td.last { 
    float: right; 
} 

td { 
    display: inline-block; 
    width: 27%; 
    height: 20px; 
    border: 1px solid #999; 
    background: #ccc; 
} 

Answer 2

Tüm tablo hücrelerine aralık eklemek için kenar boşluk özelliğini kullanabilirsiniz. Daha sonra kenar boşluğunu ebeveynden kaldırmak için kenar boşluğu ve kenar boşluğu sağa doğru kullanın.

.container { 
    max-width: 980px; 
    margin: 0 auto; 
    overflow: hidden; 
} 

.grid { 
    margin-left: -20px; /* remove outer border spacing */ 
    margin-right: -20px; /* remove outer border spacing */ 
} 

.row { 
    display: table; 
    table-layout: fixed; /* keep equal cell widths */ 
    width: 100%; /* need width otherwise cells aren't equal and they self collapse */ 
    border-spacing: 20px 0; /* best way to space cells but has outer padding */ 
} 

.col { 
    display: table-cell; 
    vertical-align: top; 
} 

tek dezavantajı tablo genişliği 100% ihtiyacı vardır ve marj doğru çalışmaz çünkü ekstra iç içe div ihtiyaç olmasıdır.

<div class="container"> 
    <div class="grid"> 
     <div class="row"> 
      <div class="col">col</div> 
      <div class="col">col</div> 
      <div class="col">col</div> 
     </div> 
    </div> 
</div>