Border-collapse
border-collapse ile hücre kenarlıklarını birleştirirsin.
Border-collapse nedir?
border-collapse özelliği iki değer alır: collapse ve separate (varsayılan). collapse hücre kenarlıklarını tek çizgide birleştirir; separate her hücrenin kenarlığını ayrı tutar.
Çoğu veri tablosunda collapse tercih edilir; daha sade bir görünüm verir. separate ise hücreler arası boşluk istendiğinde işe yarar. Hangisini seçeceğin tasarıma bağlıdır.
Border-spacing
border-spacing özelliği, yalnızca border-collapse: separate durumunda çalışır. Hücreler arasındaki yatay ve dikey boşluğu belirler.
Örnek: border-spacing: 8px; tüm yönlere 8 piksel boşluk koyar. İki değer verirsen ilki yatay, ikincisi dikey boşluktur: border-spacing: 4px 12px. collapse kullanıyorsan bu özelliğin etkisi olmaz. Bu nedenle ikisi birlikte düşünülür.
Uygulama Satış raporu tablosuna border-collapse ekle
Bir .satislar sınıflı tabloya şunları ekle: .satislar seçicisine border-collapse: collapse; ve width: 100%;; .satislar td, .satislar th seçicisine border: 1px solid #cbd5e1; ve padding: 10px; yaz.
Örnek çözümü göster
.satislar seçicisi aç, içine border-collapse: collapse; ve width: 100%; yaz. Sonra .satislar td, .satislar th seçicisi aç, içine border: 1px solid #cbd5e1; ve padding: 10px; yaz.
Örnek çözüm:
.satislar {
border-collapse: collapse;
width: 100%;
}
.satislar td, .satislar th {
border: 1px solid #cbd5e1;
padding: 10px;
}Kendini test et
-
Hangi değer hücre kenarlıklarını birleştirir?
table { border-collapse: ?; }- separate
- collapse
- spacing
- merge
Cevabı göster
collapse — Doğru! collapse değeri hücre kenarlıklarını tek çizgide birleştirir.
-
Kenarlıkları birleştir
table { border-collapse: ____; }Cevabı göster
table { border-collapse: collapse; } -
Değerleri davranışla eşleştir
- collapse
- kenarlıkları birleştirir
- separate
- kenarlıkları ayrı tutar
- border-spacing: 8px
- hücreler arası boşluk
- padding: 12px
- hücre iç boşluğu