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


97

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?


2
Neden hücre aralığı ve hücre dolgusu değil?
adatapost

1
Hücre aralığı, sütunlar arasında da boşluk verecektir.
rahul

4
Hücre aralığı ve hücre dolgusu geçerli değil (X) HTML. Onları kullanmamalısın.
freiksenet

8
@freiksenet: Yanılıyorsunuz. Mükemmel derecede geçerli katı HTML4 ( w3.org/TR/html401/struct/tables.html#h-11.2.1 ), XHTML1 ( w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ) ve hatta XHTML1 .1 ( w3.org/MarkUp/DTD/xhtml-table-1.mod ).
mercator

Yanıtlar:


224

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üş.


Ah doğru, daha geniş bir aralığa sahip belirli bir sütun elde etmeye çalışıyordum, bu yüzden masaya uygulamayı düşünmedim
Jonathan.

4
Bu çözüm, aralığı belirli satırlara seçici olarak uygulamanıza izin vermez.
Flimm

15
Soru bunu istemedi.
John Haugeland

Bu iyi bir fikir, ancak ilk satırın üst boşluğunu doldurmak için standart olmayan ama işe yarayan bir çözüm bulmam gerekiyordu. Veriliyor thead, tbody {position: relative; top: -{border-spacing-value} }.
Farzad YZ

4
seni sevdiğimi söyleyebilir miyim? Aman Tanrım. az önce bir $$ kurtardın
NikosKeyz

95
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.


Test ettin mi Görünüşe göre td'ler çökmeli veya çökmesiz dolgulu olabilir. Sınırlar daraltmayla çalışır, ancak IE'de çalışmaz.
Kobi

Bu işe yaradı. Kenar boşluklarının işe yaramaması sinir bozucu, ancak bu durumda önemli değil. Teşekkürler.
MGOwen

30
Bu gerçekten kötü bir yaklaşım. Hücrelerin kutularını, hücreleri birleştirmek yerine, hücreleri konumlandıracak şekilde değiştiriyorsunuz, çünkü hücrelerin ayrı olmasını istiyorsunuz. Hücrelerin arka plana ihtiyacı olduğu anda, mahvolursun. Doğru yaklaşım, sınır ayrımını tanımlamak için sınır ayrımının kullanılması değil, sınır ayrımıdır.
John Haugeland

1
Bu, CSS2'nin neredeyse ilk uygulanan parçası, çünkü tarayıcılarda zaten herkesin piksel-doğru düzen için kullandığı HTML sürümü için uygulanmış tablo boşlukları vardı. Evet eminim. :)
John Haugeland

1
Spesifikasyonu okuyanlardan başka kimsenin bilmediği CSS'nin garip köşelerinden biri. (Şaşırtıcı derecede çok sayıda var. Benzer şekilde, şamandıra temelde hiçbir zaman pratikte kullanıldığı şekilde kullanılmamalıdır.)
John Haugeland

8

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.


Neden olumsuz oy? Diğer cevaplar sorunludur: rpflo'nun cevabı, border-collapse kullanmanızı ve hücrelerin dolgusunu genişletmenizi, böylece hücrelerin aralarında boşluk yaratmaktan daha büyük görünmesini sağlar. John Haugeland'ın cevabı, aralığı belirli satırlara seçerek uygulamanıza izin vermiyor. Devam edebilirdim ama bu cevap, diğer cevapların hiçbiri işe yaramadığında benim kullanım durumum için çalışan bir seçenektir.
Flimm

2
Anonim kullanıcının CSS ile tek tek satırların yüksekliğini belirleme şeklindeki olumsuz oylama yaklaşımı, tek tek satırları kontrol etmeniz gerektiği ihtimaline göre, tabloya sahte içerik eklemekten büyük ölçüde üstündür, bu soru bununla ilgili değildir.
John Haugeland

Sahte satırlar, tablo satırlarının tablo satırları olmasını bekleyen araçları da karıştırır (engelliler için önemli erişilebilirlik araçları ve dışa aktarma / sıralama / yeniden biçimlendirme / vb. İçin ortak eklentiler gibi). Genel bir kural olarak, stilleri kontrol etmek için sahte şeyleri içeri sokmak yerine stilleri kullanmanın birçok nedeni vardır. Daha fazla bilgi için Anlamsal Biçimlendirme hakkında okuyun.
MGOwen

@MGOwen Bu senaryoda başarısız olacak erişilebilirlik araçlarını ve nasıl başarısız olacaklarını adlandırabilir misiniz? Şimdi, ayrıntılardan bahsetmeyen erişilebilirlik tavsiyeleri konusunda şüpheliyim, aslında kimseye yardımcı olmayan birçok kötü erişilebilirlik tavsiyesi var (örneğin, HTML 5 için belge taslağı tavsiyesi tamamen yanlıştı , erişilebilirlik araçları insanların çalıştıklarını söylediği şekilde çalışın).
Flimm

4

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 * /


2

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>

1

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

td {
 padding: 10px 0
}

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


Bu, tablo satırının içinde fazladan boşluk oluşturur. Tablo satırları iyi görünmeyecek renklere sahipse.
Kokodoko

1

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

Birim bu listeden her şeyi yapabilir:

görüntü açıklamasını buraya girin

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>


0

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>  

-1

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.


1
Tabloları kullanmak için hala iyi nedenler vardır (tablo verileri gibi). Haklısın, boş sıralar kesinlikle saçma bir yoldur: P Ama bir çözüm var, sınır çöküşü.
Ryan Florence

-1

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.


-1

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

görüntü açıklamasını buraya girin

Örneğin keman çalmaya bakın

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


Bu kötü bir uygulama olarak kabul edilir. Bunun nedenlerinden biri, araçların (engelli kullanıcılar için okuyucular gibi) tablo satırlarının tablo satırları olmasını beklemesi ve gerçek satırlarla karışık "sahte" satırlarınızı dışa aktaracak / okuyacak / yorumlayacak olmasıdır. Yukarıdaki aynı cevabın 2014 yılında ilk kez verildiğine bakın.
MGOwen

1
@MGOwen öneriniz için teşekkürler. tamamen kabul etti
Jaydeep Chauhan

-4

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


3
Bu yaklaşım, hücreler farklı boyutlara sahip veriler içerdiğinde sütunların otomatik olarak sıralanmasını önler - tablo biçimlendirmesi esasen anlamsızdır. Verilen örneklerde yeterince işe yarıyor, ancak tavsiye edilen bir teknik değil. Ne demek istediğimi görmek için bir hücrenin metnini değiştirin.
verism

Hey @verism, üzgünüm ama ne demek istediğini anlamadım. Biraz daha açıklayabilir misin? Ya da bu yöntemi yoğun bir şekilde kullandığım ve başarısız olduğu senaryolarla ilgilenmek istediğim için bu yöntemin başarısız olduğu bir keman sunabilirseniz.
Sandeep Choudhary

Sütunların net bir tanımı yok; Bu, tablo verilerinin görsel yapısını kaybettiği ve okunmasının zorlaştığı anlamına gelir. jsfiddle.net/verism/zshmN/5
verism

@verism ya bu bir konudur, ancak genişlik sütunlarını düzeltebiliriz. Bunun iyi bir çözüm olmadığını biliyorum, ancak IE9'da çalışan başka bir çözüm bulamadım
Sandeep Choudhary

1
Kayan tablo satırları, CSS spesifikasyonuna göre yasal değildir. CSS2 bölüm 17, display: tablo satırı öğelerinin gösterim içinde olmasını gerektirir: tablo-satır-grubu,-başlık-grubu veya -footer-grubu öğeleri. Bununla birlikte, bölüm 9'a göre kayan algoritma, anonim bir blok ebeveyni enjekte eder. Bu, tablo satırının artık geçerli bir ana sayfa düzenine sahip olmadığı ve tarayıcının ne yapacağını tahmin ettiği anlamına gelir. Bu kesinlikle yanlıştır.
John Haugeland
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.