Css kullanarak hücreler arasında boşluk (td) ekleyin

90

Hücrenin arka plan rengi beyaz ve tablonun arka plan rengi mavi olduğu için hücre arasında boşluk olan bir tablo eklemeye çalışıyorum, padding ve marjın çalışmadığını kolayca görebilirsiniz (ben uyguluyorum td), yalnızca hücrenin içine boşluk ekler.

html css

— Amra
kaynak

2

olası yinelenen CSS'deki ayarlanan cellpadding ve cellspacing nasıl?

— kullanıcı

116

İstersiniz border-spacing:

<table style="border-spacing: 10px;">

Veya bir CSS bloğunda:

table {
  border-spacing: 10px;
}

Bkz quirksmode üzerinde border-spacing. Bunun border-spacingIE7 ve altı sürümlerde çalışmadığını unutmayın.

— Dominic Rodger
kaynak

2

IE7 ve altında, tablo etiketinde hücre aralığı özelliğini kullanabilirsiniz. Ayrıca IE'de çalışmasını sağlamak için ikisini de sağlayabilirsiniz. Diğer tarayıcılar stile öncelik verecektir.

— Tor Valamo

36

table { 
  border-spacing: 10px; 
}

Bu, çıkardıktan sonra benim için çalıştı

border-collapse: separate;

tablo etiketimden.

— Kelly
kaynak

1

ayrı yerine ayırın, ancak bana yardımcı oldu :-)

— FredRoger

Evet, "sınır çöküşünü" de değiştirmeniz gerektiğini bilmiyordum. Bu doğru cevap olmalı.

— jleggio

31

Benimki:

border-spacing: 10px;
border-collapse: separate;

— JanBorup
kaynak

1

marjın etkili olması için boder-collapse css özelliğini eklemem gerekiyor. teşekkürler

— ufk

4

Etiket veya css özelliği için cellspacingve cellpaddingözniteliklerini kullanmayı düşünün .tableborder-spacing

— Kniganapolke
kaynak

4

TABLE etiketinin hücre aralığı (hücreler arasındaki mesafe) parametresi tam olarak istediğiniz şeydir. Dezavantajı, hem x hem de y için kullanılan tek bir değerdir, dikey / yatay olarak farklı aralık veya dolgu seçemezsiniz. Bir CSS özelliği de var, ancak yaygın olarak desteklenmiyor.

— SF.
kaynak

2

Varsayalım cellspcing/ cellpadding/ border-spacingproperty çalışmadı, kodu aşağıdaki gibi kullanabilirsiniz.

<div class="form-group">
  <table width="100%" cellspacing="2px" style="border-spacing: 10px;">
    <tr>                        
      <td width="47%">
        <input type="submit" class="form-control btn btn-info" id="submit" name="Submit" />
      </td>
      <td width="5%"></td>
      <td width="47%">
        <input type="reset" class="form-control btn btn-info" id="reset" name="Reset" />
      </td>
    </tr>
  </table>
</div>

Tabla genişliğini kullanarak düğmeyi ayırırken denedim ve başarılı oldum ve% 2 veya 1 olarak boş bir td yaptım, daha farklı dönmüyor.

— Veri deposu
kaynak

0

Kenarlar ve üst-alt için ayrı değerler istiyorsanız.

<table style="border-spacing: 5px 10px;">

— obliviJohn
kaynak