CSS: Bir tablodaki satırlar arasında nasıl boşluk oluşturabilirim?

Sonuç olarak ortaya çıkan tablonun şuna daha az benzemesi anlamına gelir:

[=== SATIR ===]
[=== SATIR ===]
[=== SATIR ===]
[=== SATIR ===]

... ve bunun gibi daha fazlası:

[=== SATIR ===]

[=== SATIR ===]

[=== SATIR ===]

[=== SATIR ===]

Eklemeyi denedim

margin-bottom:1em;

hem td ve tr ama var bir şey. Herhangi bir fikir?

Tüm istediğin:

table {
    border-collapse: separate;
    border-spacing: 0 1em;
}

Bu, 1em dikey boşluk istediğinizi ve yatay boşluk istemediğinizi varsayar. Bunu yapıyorsanız, muhtemelen satır yüksekliğinizi de kontrol etmelisiniz.

İnsanların verdiği cevaplardan bazılarının sınır çöküşü içermesi biraz garip: etkisi sorunun sorulduğunun tam tersi olan çöküş.

table {
    border-collapse: collapse;
}

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

Önce sınır daraltma ayarını yapmadığınız sürece hücreler hiçbir şeye tepki vermez. Ayrıca, ayarlandıktan sonra (diğer şeylerin yanı sıra) TR öğelerine sınır ekleyebilirsiniz.

Bu düzen içinse, DIV'leri ve daha güncel düzen tekniklerini kullanmaya geçerim, ancak bu tablo verilerse, kendinizi devre dışı bırakın. Veri için web uygulamalarımda hala yoğun bir şekilde tablo kullanıyorum.

Diğer yanıtların hiçbiri tatmin edici değilse, her zaman boş bir satır oluşturabilir ve şeffaf olması için uygun şekilde CSS ile biçimlendirebilirsiniz.

Kenarlıklarınız yoksa veya kenarlıklarınız varsa ve hücrelerin içinde boşluk olmasını istiyorsanız padding, veya kullanabilirsiniz line-height. Bildiğim kadarıyla marjın hücreler ve satırlar üzerinde etkisi yoktur.
Hücre aralığı için bir CSS özelliği border-spacing, ancak IE6 / 7'de çalışmaz (böylece kalabalığınıza bağlı olarak kullanabilirsiniz).

Her şey başarısız olursa cellspacing, biçimlendirmenizde eski özniteliği kullanabilirsiniz - ancak bu size sütunlar arasında boşluk da verecektir. Bazı CSS sıfırlamaları , tarayıcılar arası destek almak için yine de ayarlamanızı önerir:

/ * tabloların cellspacing="0"işaretlemede hala ihtiyacı var * /

Yol budur (bunun imkansız olduğunu düşünüyordum):

Önce tabloya sadece dikey kenar aralığı (örneğin 5px) verin ve yatay kenar boşluğunu 0 olarak ayarlayın. Ardından her satır hücresine uygun kenarlıklar vermelisiniz. Örneğin, her satırın en sağındaki hücre üstte, altta ve sağda kenarlığa sahip olmalıdır. En soldaki hücrelerin üstte, altta ve solunda kenarlık olmalıdır. Ve bu 2 arasındaki diğer hücrelerin yalnızca üstte ve altta kenarlıkları olmalıdır. Bu örnek gibi:

<table style="border-spacing:0 5px; color:black">
    <tr>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-left:thin black solid;">left-most cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-right:thin black solid;">right-most cell</td>
    </tr>
    <tr>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-left:thin black solid;">left-most cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-right:thin black solid;">right-most cell</td>
    </tr>
    <tr>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-left:thin black solid;">left-most cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-right:thin black solid;">right-most cell</td>
    </tr>
</table>

Kanımca, yapmanın en kolay yolu etiketinize dolgu eklemektir.

td {
 padding: 10px 0
}

Umarım bu size yardımcı olur! Tezahürat!

Basitçe padding-topve padding-bottombir tdelement üzerinde kullanabilirsiniz .

Birim bu listeden her şeyi yapabilir:

Demo Kodu:

td
{
  padding-top: 10px;
  padding-bottom: 10px;
}

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>

Alanın td ile aynı arka plan rengine sahip olmasını istiyorsanız, TD'deki dolgu çalışır.

benim durumumda gereksinim, başlık satırı ile üstündeki boşluk arasındaki boşluk içindi

Bu stili tek bir hücreye uygulayarak, istenen ayrımı elde ettim. Onu tüm hücrelere eklemek gerekmiyordu ... Muhtemelen EN zarif değil, ama muhtemelen ayırıcı sıralardan daha zarif.

<td colspan="10"> 
    <div class="HeaderRow" 
         style="margin-top:10px;">
            <%# Eval("VendorName")%>
     </div>
</td>  

Tabloları kullanarak tasarıma sadık kalırsanız, en iyi fikir tablodaki her satır arasına içeriği olmayan ve belirtilen yükseklikte boş bir satır vermek olacaktır.

Bu karmaşıklığı önlemek için div kullanabilirsiniz. Sadece her bir div'e bir marj verin.

CSS kullanarak her satırın yüksekliğini de değiştirebilirsiniz.

<head>
 <style>
 tr {
   height:40px;
 }
</style>
</head>

<body>
<table>

<tr> <td>One</td> <td>Two</td> </tr>
<tr> <td>Three</td> <td>Four</td> </tr>
<tr> <td>Five</td> <td>Six</td> </tr>

</table>
</body>

Ayrıca <td>elemanın yüksekliğini de değiştirebilirsiniz, size aynı sonucu vermelidir.

<tr>Hemen altında başka bir tane oluşturun ve içeriğine biraz boşluk veya yükseklik ekleyin<td>

Örneğin keman çalmaya bakın

https://jsfiddle.net/jd_dev777/wx63norf/9/

Tr'ye aşağıdaki kuralı ekleyin ve çalışmalıdır

float: left

Örnek (IE9'da ders dışı açın :)): http://jsfiddle.net/zshmN/

DÜZENLEME: Bu, birçokları tarafından belirtildiği gibi yasal veya doğru bir çözüm değildir, ancak seçeneğiniz yoksa ve bir şeye ihtiyacınız varsa, bu IE9'da çalışacaktır.

Bu yüzden oy verenler, lütfen bize doğru çözümü de bildirin