Tablodaki iki satır arasındaki boşluk?

Bu CSS ile mümkün mü?

deniyorum

tr.classname {
  border-spacing: 5em;
}

boşuna. Belki yanlış bir şey yapıyorum?

tdElemanlarınızda dolgu kullanmanız gerekir . Böyle bir şey hile yapmalı. Tabii ki, aynı sonucu, alt dolgu yerine bir üst dolgu kullanarak da alabilirsiniz.

Aşağıdaki CSS kodunda, büyük harf işareti, doldurmanın yalnızca sınıftaki öğelere tddoğrudan yönlendirilen öğelere uygulandığı anlamına gelir . Bu, iç içe tabloların kullanılmasını mümkün kılacaktır. (Örnek kodda C ve D hücresi.) Doğrudan çocuk seçici için tarayıcı desteğinden çok emin değilim (IE 6'yı düşünün), ancak herhangi bir modern tarayıcıda kodu kırmamalıdır.trspaceUnder

/* Apply padding to td elements that are direct children of the tr elements with class spaceUnder. */

tr.spaceUnder>td {
  padding-bottom: 1em;
}

<table>
  <tbody>
    <tr>
      <td>A</td>
      <td>B</td>
    </tr>
    <tr class="spaceUnder">
      <td>C</td>
      <td>D</td>
    </tr>
    <tr>
      <td>E</td>
      <td>F</td>
    </tr>
  </tbody>
</table>

Bu bir şekilde şöyle olmalıdır:

+---+---+
| A | B |
+---+---+
| C | D |
|   |   |
+---+---+
| E | F |
+---+---+

Üst tabloda ayarlamayı deneyin

border-collapse:separate; 
border-spacing:5em;

Artı bir sınır bildirimi ve bunun istediğiniz etkiyi sağlayıp sağlamadığını görün. Yine de IE'nin "ayrılmış sınırlar" modelini desteklemediğine dikkat edin.

Herhangi bir veri ile kimlik albümleri ile tablo var ... Ben trs ve tds atladım

<table id="albums" cellspacing="0">       
</table>

CSS'de:

table#albums 
{
    border-collapse:separate;
    border-spacing:0 5px;
}

Masanın arkasında bir arka plan görüntüsü olduğundan, beyaz dolgu ile taklit etmek işe yaramaz. Her içerik satırı arasına boş bir satır koymayı seçtim:

<tr class="spacer"><td></td></tr>

ardından boşluk satırlarına belirli bir yükseklik ve saydam arka plan vermek için css kullanın.

Mozilla Geliştirici Ağı'ndan :

Kenarlık aralığı CSS özelliği, bitişik hücrelerin kenarlıkları arasındaki mesafeyi belirtir (yalnızca ayrılmış kenarlıklar modeli için). Bu, sunum HTML'sindeki hücre aralığı özelliğine eşdeğerdir, ancak farklı yatay ve dikey boşluk ayarlamak için isteğe bağlı ikinci bir değer kullanılabilir.

Bu son kısım sıklıkla denetlenir. Misal:

.your-table {
    border-collapse: separate; /* allow spacing between cell borders */
    border-spacing: 0 5px; /* NOTE: syntax is <horizontal value> <vertical value> */

GÜNCELLEME

Artık OP'nin spesifik, ayrı satırların daha fazla boşluk olmasını istediğini anlıyorum. tbodyAnlambilimi bozmadan bunu başaran unsurlarla bir kurulum ekledim . Ancak, tüm tarayıcılarda desteklenip desteklenmediğinden emin değilim. Chrome'da yaptım.

Aşağıdaki örnek, tablonun ayrı satırlar, tam şişmiş css tatlılığı gibi görünmesini nasıl sağlayabileceğinizi göstermek içindir. Ayrıca ilk satıra tbodykurulumla daha fazla boşluk bıraktı . Kullanmaktan çekinmeyin!

Destek bildirimi: IE8 +, Chrome, Firefox, Safari, Opera 4+

.spacing-table {
  font-family: 'Helvetica', 'Arial', sans-serif;
  font-size: 15px;
  border-collapse: separate;
  table-layout: fixed;
  width: 80%;
  border-spacing: 0 5px; /* this is the ultimate fix */
}
.spacing-table th {
  text-align: left;
  padding: 5px 15px;
}
.spacing-table td {
  border-width: 3px 0;
  width: 50%;
  border-color: darkred;
  border-style: solid;
  background-color: red;
  color: white;
  padding: 5px 15px;
}
.spacing-table td:first-child {
  border-left-width: 3px;
  border-radius: 5px 0 0 5px;
}
.spacing-table td:last-child {
  border-right-width: 3px;
  border-radius: 0 5px 5px 0;
}
.spacing-table thead {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.spacing-table tbody {
  display: table;
  table-layout: fixed;
  width: 100%;
  border-spacing: 0 10px;
}

<table class="spacing-table">
  <thead>
    <tr>
        <th>Lead singer</th>
        <th>Band</th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td>Bono</td>
        <td>U2</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
        <td>Chris Martin</td>
        <td>Coldplay</td>
    </tr>
    <tr>
        <td>Mick Jagger</td>
        <td>Rolling Stones</td>
    </tr>
    <tr>
        <td>John Lennon</td>
        <td>The Beatles</td>
    </tr>
  </tbody>
</table>

Ayırıcı satır eklemeyi deneyebilirsiniz:

html:

<tr class="separator" />

css:

table tr.separator { height: 10px; }

Bir tablo hücresinin kenar boşluğunu değiştiremezsiniz. Ancak dolguyu değiştirebilirsiniz. Hücreyi büyütecek ve artan dolgu ile metni kenardan uzağa itecek olan TD'nin dolgusunu değiştirin. Bununla birlikte, sınır çizgileriniz varsa, yine de tam olarak istediğiniz şey olmaz.

Bir göz atın ayrı: border-çöküş özniteliği (varsayılan) ve sınır-aralık özelliği.

İlk olarak, onları kenarları daraltmakla ayırmanız gerekir , daha sonra sütunlar ve satırlar arasındaki boşluğu kenar boşluğu ile tanımlayabilirsiniz .

Bu CSS özelliklerinin her ikisi de aslında her tarayıcıda iyi desteklenir, buraya bakın .

table     {border-collapse: separate;  border-spacing: 10px 20px;}

table, 
table td,
table th  {border: 1px solid black;}

<table>
  <tr>
    <td>Some text - 1</td>
    <td>Some text - 1</td>
  </tr>
  <tr>
    <td>Some text - 2</td>
    <td>Some text - 2</td>
  </tr>
  <tr>
    <td>Some text - 3</td>
    <td>Some text - 3</td>
  </tr>
</table>

Tamam, yapabilirsin

tr.classname td {background-color:red; border-bottom: 5em solid white}

Arka plan renginin satır yerine td'de ayarlandığından emin olun. Bu, çoğu tarayıcıda çalışmalıdır ... (Chrome, yani & ff test edildi)

border-collapse: separate;Masayı ayarlamanız gerekir ; çoğu tarayıcı varsayılan stil sayfası başlar ve border-collapse: collapse;bu kenar boşluğunu kapatır.

Ayrıca, kenarlık aralığı: TDdeğil, devam eder TR.

Deneyin:

<html><head><style type="text/css">
    #ex    { border-collapse: separate; }
    #ex td { border-spacing: 1em; }
</style></head><body>
    <table id="ex"><tr><td>A</td><td>B</td></tr><tr><td>C</td><td>D</td></tr></table>
</body>

Tabloda satır yüksekliğini kullanabilirsiniz :

<table style="width: 400px; line-height:50px;">

tr { 
    display: block;
    margin-bottom: 5px;
}

Çok geç cevap :)

Öğelere kayan nokta uygularsanız tr, marginöznitelikli iki satır arasında boşluk bırakabilirsiniz .

table tr{
float: left
width: 100%;
}

tr.classname {
margin-bottom:5px;
}

Satırlar arasında bir boşluk yanılsaması oluşturmak için, satıra arka plan rengi uygulayın ve ardından bir "boşluk" oluşturulması için beyaz renkle kalın bir kenarlık oluşturun :)

tr 
{
   background-color: #FFD700;
   border: 10px solid white;
}

Tablolar için boşluk bırakmanın doğru yolu, hücre dolgusu ve hücre boşluğu kullanmaktır.

<table cellpadding="4">

Benzer bir sorunla mücadele ederken buna tökezledim. Varun Natraaj'ın cevabının oldukça yardımcı olduğunu gördüm, ancak bunun yerine şeffaf bir kenarlık kullanacağım.

td { border: 1em solid transparent; }

Saydam kenarlıklar hala genişliğe sahiptir.

2015 yılında en son tarayıcılar için çalışır. Basit bir çözüm. Şeffaflık için işe yaramaz, ancak Thoronwen'in cevabından farklı olarak, herhangi bir boyutta render yapmak için şeffaf olamaz.

    tr {
      border-bottom:5em solid white;
    }

Basitçe içine divyerleştirin tdve aşağıdaki stilleri ayarlayın div:

margin-bottom: 20px;
height: 40px;
float: left;
width: 100%;

Bunun eski bir iş parçacığının cevabı olduğunu ve istenen çözüm olmayabilir, ancak tüm önerilen çözümler ihtiyacım olanı yapmasa da, bu çözüm benim için çalıştı.

Biri arka plan rengi diğeri kenarlık rengi olan 2 tablo hücresim vardı. Yukarıdaki çözümler sınırı kaldırır, böylece sağdaki hücre havada havada süzülüyormuş gibi görünecektir. Hile yaptı Çözelti değiştirmekti table, trve tddiv ve buna tekabül eden sınıfları ile: Tablo olur div id="table_replacer", tr olur div class="tr_replacer"ve td olacaktır div class="td_replacer"(değişiklik açıkça zamanda div etiket kapatma)

Benim sorunum için çözüm almak için css:

#table_replacer{display:table;}
.tr_replacer {border: 1px solid #123456;margin-bottom: 5px;}/*DO NOT USE display:table-row! It will destroy the border and the margin*/
.td_replacer{display:table-cell;}

Umarım bu birine yardımcı olur.

<Td /> öğelerini <div /> öğeleriyle doldurabilir ve istediğiniz div'lere kenar boşluğu uygulayabilirsiniz. Satırlar arasındaki görsel boşluk için <tr /> öğesinde yinelenen bir arka plan görüntüsü kullanabilirsiniz. (Bu, bugün kullandığım çözümdü ve daha fazla test etmememe rağmen hem IE6 hem de FireFox 3'te çalışıyor gibi görünüyor.)

Ayrıca, <td /> s içine <div /> s koymak için sunucu kodunuzu değiştirmek istemiyorsanız, <td /> içeriğini <div / >, istediğiniz şekilde CSS uygulamanızı sağlar.

Veya boşluk eklemek istediğiniz satırların arasına kenar boşluğunun yüksekliğine sahip bir boşluk ekleyin

İşte birkaç uyarı ile basit ve zarif bir çözüm:

• Aslında boşlukları şeffaf hale getiremezsiniz, onlara belirli bir renk vermeniz gerekir.
• Boşlukların üstündeki ve altındaki kenarların köşelerini yuvarlayamazsınız
• Tablo hücrelerinizin doldurma ve kenarlıklarını bilmeniz gerekir

Bunu göz önünde bulundurarak şunu deneyin:

td {padding:5px 8px;border:2px solid blue;background:#E0E0E0}  /* lets say the cells all have this padding and border, and the gaps should be white */

tr.gapbefore td {overflow:visible}
tr.gapbefore td::before,
tr.gapbefore th::before
{
  content:"";
  display:block;
  position:relative;
  z-index:1;
  width:auto;
  height:0;
  padding:0;
  margin:-5px -10px 5px;  /* 5px = cell top padding, 10px = (cell side padding)+(cell side border width)+(table side border width) */
  border-top:16px solid white;  /* the size & color of the gap you want */
  border-bottom:2px solid blue; /* this replaces the cell's top border, so should be the same as that. DOUBLE IT if using border-collapse:separate */
}

Aslında yaptığınız şey bir dikdörtgeni yapıştırmak ::before bloğu, boşluktan önce istediğiniz satırdaki tüm hücrelerin üstüne . Bu bloklar mevcut sınırların üst üste gelip onları gizlemek için hücrelerden biraz dışarı çıkar. Bu bloklar sadece bir üst ve alt sınır birlikte sandviçlenir: Üst sınır boşluğu oluşturur ve alt sınır hücrelerin orijinal üst sınırının görünümünü yeniden oluşturur.

Tablonun yanı sıra hücrelerin etrafında bir kenarlık varsa, 'bloklarınızın' yatay -ve kenar boşluğunu daha da artırmanız gerektiğini unutmayın. Yani 4 piksellik bir tablo kenarlığı için şunu kullanırsınız:

margin:-5px -12px 5px;     /* 14px = original 10px + 2px for 'uncollapsed' part of table border */

Tablonuz border-collapse:separatebunun yerine kullanıyorsa border-collapse:collapse, (a) tam tablo kenarlığı genişliğini kullanmanız gerekir:

margin:-5px -14px 5px;     /* 14px = original 10px + 4px full width of table border */

... ve ayrıca (b) boşluğun altında görünmesi gereken kenarlığın çift genişliğini değiştirin:

border-bottom:4px solid blue;     /* i.e. 4px = cell top border + previous row's bottom border */

Teknik, isterseniz bir .gapafter sürümüne veya satır boşlukları yerine dikey (sütun) boşluklar oluşturmaya kolayca uyarlanabilir.

İşte onu görebileceğiniz bir kod kalemi: https://codepen.io/anon/pen/agqPpW

İşte bu sorunsuz çalışıyor:

#myOwnTable td { padding: 6px 0 6px 0;}

Gerektiğinde hangi td'yi belirterek daha ince taneli bir düzen çalıştırabileceğinizi varsayalım.

yukarıda gösterilen bunu yapıyor ...

table tr{ float: left width: 100%; }  tr.classname { margin-bottom:5px; } 

dikey sütun hizalamasını kaldırır, bu nedenle nasıl kullandığınıza dikkat edin

Denedin mi:

tr.classname { margin-bottom:5em; }

Alternatif olarak, her bir td de ayarlanabilir:

td.classname { margin-bottom:5em; }

veya

 td.classname { padding-bottom:5em; }