CSS border-collapse Özelliği
CSS2
Bu özellik, tablonun kenarlıklarının ayrı mı yoksa tek bir bütün halinde mi görüneceğini ayarlamak için kullanılır.
Yapısı (Syntax)border-collapse: separate | collapse | initial | inherit;
| Varsayılan Değer | separate |
| JavaScript Yapısı |
object.style.borderCollapse = "collapse"
|
| Animasyon Özellikleri Uygulanabilir | Hayır (Daha fazla detay) |
Değerler
| Değer | Açıklama | Versiyon |
|---|---|---|
| seperate | Varsayılan değerdir ve kenarlıklar ayrı görünür. | CSS2 |
| collapse | Tablonun kenarlıkları bir bütün halinde tek bir kenarlık olarak görünür. | CSS2 |
Örnekler
collapse değeri kullanılırsa, birbirini tekrar eden kenarlık sorunu ortadan kalkıyor. Aşağıdaki örneği inceleyerek arasındaki farkı daha net bir şekilde anlayabilirsiniz.
<table class="table-seperate" border="1">
<tr>
<td>Tayfun Erbilen</td>
<td>http://erbilen.net</td>
</tr>
<tr>
<td>PROTOTÜRK</b>
<td>https://prototurk.com</td>
</tr>
</table>
<hr>
<table class="table-collapse" border="1">
<tr>
<td>Tayfun Erbilen</td>
<td>http://erbilen.net</td>
</tr>
<tr>
<td>PROTOTÜRK</b>
<td>https://prototurk.com</td>
</tr>
</table>
<style>
table {
width: 250px;
}
table.table-seperate {
border-collapse: seperate;
}
table.table-collapse {
border-collapse: collapse;
}
</style>