TBODY öğeleri arasında nasıl boşluk bırakılır

Bunun gibi bir masam var:

<table>
    <tfoot>
        <tr><td>footer</td></tr>
    </tfoot>
    <tbody>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
    </tbody>
</table>

Her tbody öğesi arasına biraz boşluk koymak istiyorum, ancak dolgu ve kenar boşluğunun bir etkisi yoktur. Herhangi bir fikir?

Sınırların olmamasının bir sakıncası yoksa bunu deneyin.

<style>
table {
  border-collapse: collapse;
}

table tbody {
  border-top: 15px solid white;
}
</style>

<table>
    <tfoot>
        <tr><td>footer</td></tr>
    </tfoot>
    <tbody>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
    </tbody>
</table>

Tarayıcı destek gereksinimlerinize bağlı olarak bunun gibi bir şey çalışacaktır:

tbody::before
{
  content: '';
  display: block;
  height: 15px;

}

İnsanlar, bir sayfayı düzenlemek için boş tablo öğelerini kullanma konusunda her zaman tartışmalı fikirlere sahip olacaktır (bu yanıtın olumsuz oyuyla kanıtlandığı gibi). Bunu anlıyorum, ancak bazen " hızlı ve kirli " bir şekilde çalışırken onları bu şekilde kullanmak daha kolay .

Geçmiş projelerde tablo satırlarının gruplarını yerleştirmek için boş satırlar kullandım. Aralayıcı satırlarına kendilerine ait bir css sınıfı atadım ve bu sınıf için, bu tablo satırları grubu için üst ve alt kenar boşluğu görevi gören bir yükseklik tanımladım.

    .separator{
             height: 50px;
    }

   <table>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>

           <tr class="separator" colspan="2"></tr>

           <tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>

           <tr class="separator" colspan="2"></tr>

           tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>
   </table>

Tablo hücrelerinizde kenarlık yoksa , stil sayfanızdaki tipik hücre veya satır için tablonuzun tüm satırlarını eşit aralıklarla yerleştiren bir yükseklik de tanımlayabilirsiniz.

tr{
   height: 40px;
}

Birkaç tarayıcıda satır aralığı <tbody>ile içermesi durumunda ::before, sözde ile düzgün bir şekilde birden fazla boşluk bırakma konusunda sorun yaşadım .<tr><td>

Temel olarak, böyle bir <tbody>yapılandırmanız varsa :

<tbody>
    <tr>
        <td>td 1</td>
        <td rowspan"2">td 2</td>
        <td>td 3</td>
        <td>td 4</td>
    </tr>
    <tr>
        <td>td 1</td>
        <td>td 2</td>
        <td>td 4</td>
    </tr>
</tbody>

Ve kimin ::beforesözde öğeye css yazmasını önerdiğini takip edersiniz :

tbody::before
{
    content: '';
    display: block;
    height: 10px;
}

Bu, satır aralığını etkileyecek ve tablonun ikinci sırada birincisinde <tr>kaç <td>satır aralığı bulunduğunu "kaybetmesine" neden olacaktır .

Öyleyse, bu tür bir sorunla karşılaşırsa, çözüm ::beforebu şekilde sözde stil oluşturmaktır :

tbody::before
{
    content: '';
    display: table-row;
    height: 10px;
}

İşte bir keman

İşte bağlı olan başka bir olasılık: tüm tarayıcılarda bulunmayan ilk çocuk:

<style>
table {
  border-collapse: collapse;
}

td {
  border: 1px solid black;
}

tbody tr:first-child td {
  padding-top: 15px;
}

</style>

<table>
    <tfoot>
        <tr><td>footer</td></tr>
    </tfoot>
    <tbody>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
    </tbody>
</table>

Sadece set displayolarak blockve işe yarayacak.

table tbody{
    display:block;
    margin-bottom:10px;
    border-radius: 5px;
}

Yukarıda verilen tüm cevaplardan sadece djenson47'nin cevapları sunum ve içerik ayrımı sağlar . Daraltılmış sınır modeli yönteminin dezavantajı , tek tek hücreleri ayırmak için artık tablonun kenarlık veya hücre aralığı niteliklerini kullanamamanızdır . Bunun iyi bir şey olduğunu iddia edebilirsiniz ve bazı geçici çözümler vardır, ancak bu bir acı olabilir. Bu yüzden birinci çocuk yönteminin en zarif olduğunu düşünüyorum .

Alternatif olarak, TBODY sınıfınızın taşma özelliğini "görünür" dışında herhangi bir şeye de ayarlayabilirsiniz . Bu yöntem, ayrı bir kenarlık modelini korumanıza da olanak tanır:

<style>
tbody {
    overflow: auto;
    border-top: 1px solid transparent;
}
</style>
<table>
    <tfoot>
        <tr><td>footer</td></tr>
    </tfoot>
    <tbody>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
    </tbody>
</table>

TD'lere padding uygulanabildiğinden, + işareti ile hile yapabilirsiniz. Daha sonra tbody'in ilk TR'sinin TD'lerine bir üst dolgu vermek mümkün olacaktır:

// The first row will have a top padding
table tbody + tbody tr td {
    padding-top: 20px;
}

// The rest of the rows should not have a padding
table tbody + tbody tr + tr td {
    padding-top: 0px;
}

"Tbody + tbody" yi ekledim, böylece ilk tbody üst dolgusuna sahip olmayacak. Ancak gerekli değildir.

Hiçbir dezavantaj olmadığını bildiğim kadarıyla :), ancak eski tarayıcıları test etmedi.

Bu border-spacinggruplar arasına boşluk eklemek için tablo satırı grupları içeren bir tabloda kullanabilirsiniz . Yine de, hangi grupların aralıklı olduğunu ve hangilerinin olmadığını belirlemenin bir yolu olduğunu sanmıyorum.

<table>
  <thead>
    ...
  </head>
  <tbody>
    ...
  </tbody>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

CSS

table {
  border-spacing: 0px 10px; /* h-spacing v-spacing */
}

YENİ CEVAP

İstediğiniz kadar <tbody>etiket kullanabilirsiniz . Şimdiye kadar bunun W3C için uygun olduğunu fark etmemiştim. Aşağıdaki çözümümün işe yaramadığını söylememek değil (işe yarıyor), ancak yapmaya çalıştığınız şeyi yapmak için, <tbody>etiket sınıflarınızı atayın ve ardından <td>CSS aracılığıyla tek tek etiketlerine referans verin :

table tbody.yourClass td {
    padding: 10px;
}

ve HTML'niz buna göre:

<table> 
<tbody>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
</tbody>
<tbody class="yourClass">    
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
</tbody>
<tbody>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
</tbody>
</table>

Şu adamı dene :)

ESKİ CEVAP

ne yaparsan yap, boş satırlar EKLEMEYİN ...

Tablonuzda 1'den fazla tbody elemanı olmamalıdır. Yapabileceğiniz şey, <tr>öğelerinizdeki class veya id niteliğini ayarlamak ve bunlara karşılık gelen <td>etiketlere dolgu yapmaktır :

table {
    border-collapse: collapse;
}

tr.yourClass td {
    padding: 10px;
}

Üst ve altlara <tr>ek bir sınıf bile atayabilirsiniz, böylece yalnızca üst veya alt dolgu yaparlar:

tr.yourClass.topClass td {
    padding: 10px 0 0 0;
}

tr.yourClass.bottomClass td {
    padding: 0 0 10px 0;
}

ve HTML'nizde <tr>etiketiniz şöyle görünür:

<table> 
<tbody>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr class="yourClass topClass"><td>Text</td></tr>
<tr class="yourClass"><td>Text</td></tr>
<tr class="yourClass bottomClass"><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
</tbody>
</table>

Bu yardımcı olur umarım!

djensen47 yanıtı yeni tarayıcılar için harika çalışıyor, ancak belirtildiği gibi IE7'de çalışmıyor.

Eski tarayıcıları desteklemek için bu sorun için çözümüm, her hücrenin içeriğini bir div içine kaydırmaktı. Ardından div'e bir kenar boşluğu ekleyin.

<table class="tbl">
<tr></tr>
<tr></tr>
<tr></tr>
<tr><td><div></div></td></tr>
</table>

CSS

.tbl tr td div {
    height:30px;
    margin-top:20px;
}

Yükseklik ayarı, div içinde kullanılan herhangi bir hücre renginin metnin etrafında daralmasını önlemek için hücreleri en az 30 piksel yüksek tutar. Üst kenar boşluğu, tüm satırı daha uzun hale getirerek istenen alanı oluşturur.

Bunu kendim çözmeye çalışırken karşılaştım. <br>Kapanış </tbody>etiketinin hemen önüne bir etiket koyma konusunda başarılı oldum . Tamamen görsel bir düzeltme, ancak test ettiğim çoğu tarayıcıda çalışıyor gibi görünüyor.

<table>
    <tbody>
        <tr>
            <td></td>
        </tr>
        <br>
    </tbody>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
</table>

Aynı zamanda erişilebilir olmalıdır.

İlk cevaplayan herkese kredi ile ...

table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 50%;
}
tbody:before {
  content: "";
  display:block;
  border-top: 15px solid white;
}
tbody tr {
  border-color: #000;
  border-style: solid;
}
tbody tr:first-of-type{
  border-width: 2px 2px 0 2px;
}
tbody tr:nth-of-type(1n+2){
  border-width: 0 2px 0 2px;
}
tbody tr:last-of-type{
  border-width: 0 2px 2px 2px;
}
tbody tr:nth-child(odd) {
  background-color: #ccc;
}
tbody tr:hover {
  background-color: #eee;
}
td {
  text-align: right;
}

<table>
  <tbody>
    <tr>
      <th colspan="3">One</th>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="3">Two</th>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </tbody>
</table>