Lütfen tablo başlıklarını sabitleyin

Lütfen tablo başlıklarını sabitleyin

• Web'de büyük veri kümeleri veya tablo düzenleriyle sık sık karşılaşıyoruz.
• Yüzlerce satırı olan bir tabloda kaydırmaya başlayınca sorun ortaya çıkıyor.
• Tablo başlığı kaybolduğunda, kullanıcının her sütunun neyle ilişkili olduğunu hatırlaması zorlaşıyor.

Sabit başlık

• Sabit başlıklar sihirli gibi görünür, ama uygulaması çok kolaydır.
• thead öğesine yalnızca iki CSS özelliği eklemeniz yeterlidir:
  • position: sticky;
  • top: 0;
• Dünya genelinde yaklaşık %96 destek oranına sahip sticky, birçok tarayıcıda güvenilir biçimde desteklenir.
• Kullanıcı deneyimini iyileştirmeye de yardımcı olur.

GN⁺ görüşü

• Bir web sitesinde büyük tablolarla çalışırken, kullanıcı aşağı kaydırsa bile tablonun başlığını kolayca görebilmesini sağlamak, kullanıcı deneyimini önemli ölçüde iyileştirir.
• CSS'in position: sticky; özelliğiyle tablo başlığının kolayca sabitlenebilmesi, web geliştiricileri için faydalı bir bilgidir.
• Bu özelliğin yaygın olarak desteklenmesi, web geliştiricilerine bunu farklı tarayıcılarda güvenle uygulayabileceklerini gösterir.

[GN⁺]

Hacker News görüşleri

• Tek eksende sabit başlıklar (sticky headers) mümkün, ancak CSS’nin bunu iki eksende de destekleyeceği günü bekliyorum: GitHub issue bağlantısı
• CSS bilgim neredeyse yokken bile işlevsel web uygulamaları geliştirdim. Kısa süre önce 20.000’den fazla satırı olan bir tabloda sabit başlık denedim ama Bootstrap sınıfları, Stack Overflow, GPT ve CodePen önerilerini denememe rağmen garip yan etkiler ortaya çıktı. Ancak bu yazıdaki CodePen’i kullanarak 2 dakikada çözdüm ve production’a aldım. Teşekkürler.
• position: sticky; kullanarak tablo başlığını sabitlemek kolaymış gibi görünüyor, ancak tablo içeriğiyle bazı işlemler yapınca sorunlar çıkıyor. Örneğin, kullanıcının tabloyu kaydırıp sayfadan ayrıldıktan sonra geri döndüğünde kaydırma konumunu geri yükleyen bir özellik ekledim; fakat geri yüklenen konum her zaman bir satır aşağı kaymış oluyordu. Şeffaf tablo başlığının içinden bakınca istenen satır en üstte görünüyor, ama başlık üstüne bindiği için sonraki satır ilk görünen satır oluyor. Kaydırma konumunu başlık yüksekliğini hesaba katarak ayarlarsanız başlangıçta düzgün çalışıyor, ancak bazen birkaç piksel kayıyor. Bunun nedeni tablonun büyük olması yüzünden kaydırma olayına göre lazy loading yapılması ve otomatik tablo düzeni kullanıldığı için bazen başlık hücrelerinin fazla daralıp kelimelerin alt satıra geçmesi, dolayısıyla toplam başlık yüksekliğinin artması. Nihai çözüm, başlık öğesi üzerinde bir ResizeObserver oluşturup yükseklik değiştiğinde kaydırma konumunu dinamik olarak ayarlamak oldu. ResizeObserver belgeleri
• Tablo başlığının kenarlıklarını da sabit tutmak istiyorsanız, aşağıdaki CSS kodunu kullanabilirsiniz:

  table thead:before {
    content: '';
    position: absolute;
    width: 100%;
    top: 0;
    border-top: 2px solid;
  }
  
  table thead:after {
    content: '';
    position: absolute;
    width: 100%;
    bottom: 0;
    border-bottom: 1px solid;
  }
  

• Tablo başlıkları keşke varsayılan olarak sabitlense. Geliştiriciler <th> etiketlerini kullanma gibi ek bir çaba gösteriyorsa, büyük ihtimalle istedikleri davranış budur.
• Komut satırında başlığı standart hataya (stderr), gövdeyi ise standart çıktıya (stdout) göndermek iyi olur. Aksi halde sıralama yapıldığında başlık sonuçların arasına karışabilir.
• Chrome geçmişte position: sticky özelliğinin <thead> ve <tr> öğelerinde kullanılmasını engelliyordu: Chromium issue bağlantısı
• Sabit başlık yerine sınırlı bir viewport yüksekliği kullanarak başlığın her zaman görünür kalmasını önerenler var. Örneğin DataGridXL bunu yapıyor: DataGridXL bağlantısı (bunu yapanın kendileri olduğunu belirtiyorlar)
• CodePen örneğinde top değerini kenarlığı hesaba katarak ayarlarsanız (örneğin -1px yerine 0), tablo gövdesinin başlığın üzerine akmasını önleyebilirsiniz. İki CodePen örneği karşılaştırılıyor: eski CodePen ve iyileştirilmiş CodePen
• Bazıları "lütfen bunu yapmayın" demek istiyor: Hacker News tartışma bağlantısı