CSS ile Tablodaki Boş Hücreler (empty-cell) Nasıl Gizlenir?

Css özelliklerinden “empty-cell” görünebilir içeriği olmayan hücrelerin etrafındaki border ve arkaplanlardan hangilerinin gösterilip gösterilmeyeceğini belirlemekte kullanılır.

Modern tarayıcıların büyük bir kısmı varsayılan olarak boş hücrelerin etrafında da kenarlıklar gösterirler. Bu durumda hücreyi gösterip göstermeyeceğinizi seçmek veya border stilini “none” olarak belirtmek ya da border genişliğini “0” olarak belirtmek gibi alternatiflerden birini seçmeniz gerekir.

“border-collapse: ;“ varsayılan olarak “separate” olarak geldiğinden değişiklik yapmadan ya da “border-collapse” satırını eklemeden, empty-cell ile ilgili tercihimizi belirleyebiliriz. Aşağıdaki örneği inceleyerek kullanım yöntemini daha yakından inceleyebilirsiniz.

Not: Bootstrap vb frameworkler kullanıyorsanız border-collapse özelliğini separate olarak değiştiriniz.

See the Pen jPKzOj by MinimalCoding (@MinimalCoding) on CodePen.