Tablolarla çok uğraşanlar için çok güzel bir CSS özelliği: border-collapse

border-collapse özelliği çok güzel bir özellik. Özellikle tablolarla çizgi vererek sık sık çalışanlar bu özellik ile işlerini çok daha kolaylaştıracaklar. Peki nedir, ne işe yarar bu border-collapse özelliği? border-collapse özelliği, table elementinde satır (tr) ve hücre (tdth) kenarlıklarının bitişik veya ayrı ayrı olmasını ayarlar. Diğer bir deyişle tablo hücre çizgilerini ve kenarlıklarını üst üste bindirip bindirmemeyi ayarlar. border-collapse aşağıdaki değerleri alarak satır ve hücrelerin bitişik veya ayrı olmasını sağlar.

  • separate : Satır ve hücreler, birbirlerinden ayrı kenarlığa sahiptir.
  • collapse : Satır ve hücreler, birbirleri ile bitişik kenarlıkları ortak kullanırlar.

collapse

Eğer bir tablo hücrelerine border verilmişse ve border-collapse: collapse kullanılmadan bu işlem yapılmışsa her bir hücrenin kendi duvarının çizgisi ayrı ayrı olacaktır. İki hücre yanyana geldiğinde aradaki çizgi kalınlığı iki hücrenin iki duvarının kalınlığı kadar olacak fakat bitişik olmayan dış taraftaki çizgi kalınlığı tek duvar kalınlığında olacak. Bu da tablolarınızın kötü gözükmesine neden olur. Aşağıdaki örnekte hücre aralarındaki çizgi kalınlıklarına baktığınızda bunu daha iyi görebilirsiniz:

border-collapse:collapse uygulanmamış tablo:

tablo1

 

border-collapse:collapse uygulanmış tablo:

tablo2

 

 

Tarayıcı desteği:

Tüm bilindik tarayıcılarda düzgün çalışmakta.

collapse-browser-support

 

Bir Cevap Yazın