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

 (btxx.org)
4 puan yazan GN⁺ 2024-02-25 | 1 yorum | WhatsApp'ta paylaş
  • Çok satırlı tablolarda kaydırdıkça sütunların ne anlama geldiğini unutmak kolaylaşır ve veriyi okumak zorlaşır
  • thead öğesine yalnızca position: sticky; ve top: 0; ekleyerek başlığı sabitleme uygulanabilir
  • sticky, dünya genelinde yaklaşık %96 tarayıcı desteğine sahip olduğundan deneysel bir özellik sayılmaz
    1. öğe gibi daha aşağıdaki satırlara bakarken bile sütun başlıkları görünür kaldığı için tablo içinde gezinme deneyimi iyileşir
  • Uygulaması küçük ama etkisi büyük olduğundan, uzun tablolar sunan web sayfalarında temel bir kullanılabilirlik iyileştirmesi olarak uygulanmaya değer

Uzun tablolarda başlığın kaybolması sorunu

  • Büyük veri kümelerinde veya yüzlerce satırlık tablolarda, kaydırma sonrası tablo başlığı ekranın dışına çıkar
    1. öğeye kadar inildiğinde, her sütundaki verinin ne ifade ettiğini tekrar kontrol etmek zor olabilir
  • Özellikle ilk kez görülen tablolarda sütunların anlamını akılda tutarak okumak gerektiği için gezinme yükü artar

thead öğesine sticky uygulamak

  • Çözüm, thead öğesine iki CSS özelliği eklemektir
position: sticky;
top: 0;
  • position: sticky ile top: 0 birlikte kullanıldığında, kaydırma sırasında başlık ekranın üst kısmına sabitlenebilir
  • sticky, yaklaşık %96 küresel destek oranına sahip olduğundan birçok tarayıcıda kullanılabilir
  • Gerçek davranış CodePen örneğinde görülebilir

İlgili okumalar

1 yorum

 
GN⁺ 2024-02-25
Hacker News yorumları

  • Tek eksende sabit başlığı kabul ederim ama CSS’in iki eksende birden destekleyeceği günü hâlâ bekliyorum: https://github.com/w3c/csswg-drafts/issues/8286

    • Hem sütunları hem de başlıkları sabitlemem gereken bir sözleşmeli iş, yaptığım en zor işlerden biriydi Standart bir tablo olsaydı kolaydı; ama bu, üretilmiş CSS-as-JS kullanan karmaşık bir VueJS üçüncü taraf dinamik tablosu olduğu için CSS ve JS’in nereden geldiğini anlamak bile uzun sürdü, sonunda JS sınıf fonksiyonlarını ve üretilen CSS’i ezmek zorunda kaldım Müşteriden bu kadar zaman aldığı için özür diledim ve Vue/React kod tabanlarında kütüphane seçerken çok daha dikkatli olmaya başladım. Tablo HTML’in temel öğesi; basit tek bir iş için neden üç kat JS sınıfı ve JSON ile içe aktarılan CSS gerektiğini anlamıyorum
    • Bu sorunu doğuran asıl issue’yu muhtemelen 8 yıldır takip ediyorum; CSS spesifikasyonunun en sinir bozucu kısımlarından biri Bazen devasa veri tablolarına ihtiyaç oluyor ve üst tarafı sabit tutarken overflow-x: auto da kullanmak istiyorsunuz, ama ikisinden birini seçmeniz söyleniyor

  • İtiraf edeyim, CSS bilgim neredeyse hiç yokken bile idare eder çalışan web uygulamaları geliştiriyorum. Yakın zamanda yaklaşık 20 bin satırlık canavar bir tabloda başlığı sabitlemeye çalıştım: https://www.datasciencemeta.com/rpackages Başta Bootstrap tablo sınıflarında class="table table-header-sticky" gibi bir şey olmasını bekledim ama yoktu; Stack Overflow, GPT ve CodePen önerileriyle 20 dakika kadar uğraşınca da garip yan etkiler çıktı Ama bu yazıdaki CodePen ile 2 dakikada çalıştı ve şu anda prod ortama dağıtıyorum

  • Tablo başlığını sabitlemek position: sticky; ile kolay görünüyor, ama tablo içeriğine bir şeyler eklemeye başlar başlamaz karmaşıklaşıyor Sabit başlıklı bir tabloda, kullanıcı gövdeyi kaydırıp sayfadan ayrıldığında ilk görünen satırın indeksini kaydedip geri döndüğünde geri yükleyen bir özellik ekledim; ama her zaman yaklaşık bir satır aşağıya geri yüklüyordu. Meğer 5. satır aslında tablonun en üstündeymiş, fakat thead üstüne bindiği için 6. satır ilk satır gibi görünüyormuş Bu yüzden thead yüksekliğini hesaba katarak kaydırma konumunu ayarladım, ama bazen birkaç piksel sapıyordu; tablo büyük olduğundan kaydırma olayında gecikmeli yükleme yapıyor ve varsayılan otomatik tablo yerleşimini kullanıyorduk, bu da başlık hücrelerinin satır kırıp toplam başlık yüksekliğini değiştirmesine yol açıyordu. Sonunda thead üzerine bir ResizeObserver bağlayıp yükseklik değiştiğinde kaydırma konumunu dinamik olarak ayarladım [1] https://developer.mozilla.org/en-US/docs/Web/API/ResizeObser...

  • Bunu uygularken başlığın kenarlığının da birlikte sabit kalmasını istiyorsanız, table thead:before ve table thead:after için position: absolute, width: 100%, top: 0/bottom: 0, border-top/border-bottom vermek gibi bir yöntem kullanılabilir

  • Tablo başlıklarının otomatik olarak böyle davranmasını isterdim. Geliştirici ilgili etiketleri özellikle kullanıp ek iş yaptıysa, çoğu durumda zaten istenen davranışın bu olması muhtemel

    • Her sayfaya kullanıcı tanımlı stil sayfası yükleyebilen bir tarayıcı eklentisi kurabilirsiniz Ancak son zamanlarda yerine 500 tane ve her içinde 45 kat iç içe geçmiş ile tablo yapan site sayısı arttı; böyle yerlerde işe yarayacağını sanmıyorum
    • Böyle bir değişiklik beklenmedik biçimlerde bir şeyleri bozma ihtimali yüksek görünüyor Bunun ana nedeni, CSS Grid çıkmadan önce birçok web sitesinin tabloları ızgara yerleşimi için kullanmış olması olabilir. Başlık sabitlenirse bu tür yerleşimler bozulabilir HTML semantiğinin büyük başarısızlığı, tabloların “tablosal veriyi gösterme yöntemi” değil, “rastgele öğelerden oluşan ızgara” gibi benimsenmiş olması

  • Komut satırında başlık stderr’e, gövde stdout’a gönderilebilir Böyle yapmazsanız heights | sort -k2 -nr sonucu George 186, Wally 173, NAME HEIGHT sırasına gelir; ama başlık stdout’u bypass ederse sıra NAME HEIGHT, George 186, Wally 173 olur

    • heights | (sed -u 1q; sort -k2 -nr) düzgün çalışır Kaynak: https://stackoverflow.com/a/56151840
    • Dosyaya yazıyorsanız birkaç deneme daha ve daha fazla shell bilgisi gerekir Bu, bant içi yalnızca metin modelinin süregelen bir sınırlaması; ama STDERR’i bu şekilde kötüye kullanmak yardımcı olmaktan çok kafa karıştıracak gibi heights bir dosyaysa % head -1 heights ; sed 1,1d heights | sort -k2 -nr gibi yapabilirsiniz; heights iki kez çalıştırması pahalı bir yürütülebilir dosyaysa % heights > /tmp/heights ; head -1 /tmp/heights ; sed 1,1d /tmp/heights | sort -k2 -nr gibi yapabilirsiniz. awk ile pipe etmek de mümkün Diğer seçenekler daha az pratik ama daha az şaşırtıcı ve yürütülebilir dosyanın yazarı farklı düşünse bile çalışır
    • Burada hangisi daha iyi olur? Başlığı stderr’e göndermek mi, yoksa başlığı yalnızca stdout bir TTY olduğunda yazdırmak mı?

  • Bu uzun süre çalışmadı. Chrome eskiden thead ve tr öğelerinde position: sticky kullanımını devre dışı bırakmıştı: https://issues.chromium.org/issues/41303743 Tarayıcı destek tablosu neredeyse tamamen yeşil görünüyordu ama hatırladığım kadarıyla Chrome’daki tablolarda çalışmıyordu

    • Artık bu kadar basit hale gelmiş olması şaşırtıcı. Eskiden gerektiğinde tarayıcılar arasında çalıştırmak için HTML ve CSS’e bir sürü ıvır zıvır eklemek gerekiyordu Yine de şaşırtıcı değildi; çünkü web geliştirme genel olarak böyle bir şey

  • Açıkçası “lütfen yapmayın” demek isteyen taraf da var: https://news.ycombinator.com/item?id=32998091

    • Genel web sayfaları için tamamen katılıyorum. Stylus stili yazmaktan daha hızlı olduğu için uBlock Origin ile sabit öğeleri sık sık siliyorum; site genelinde uyguladığım genel stil de oldukça iyi iş gördü Ama kaynak metin sabit başlık sütunları olan veri tablolarından bahsediyor, bu yüzden bu öneri gerçekten oldukça faydalı
    • O, tüm web sayfasındaki sabit başlıkla ilgili. Tablolarda durum tamamen farklı Bir düzine kadar sayısal sütunu olan bir tabloya bakarken biraz aşağı kaydırınca neyin ne olduğunu anlayamaz hale gelmekten gerçekten nefret ediyorum
    • sticky özelliğinin nesi kötü?

  • CodePen’de top değerini kenarlık kadar ofsetlemek daha iyi görünüyor. Örneğin 0 yerine -1px koyarsanız tablo gövdesinin başlığın üzerinden görünmesini engelleyebilirsiniz Karşılaştırma: https://codepen.io/bradleytaunt/pen/bGZyJBj Düzeltilmiş sürüm: https://codepen.io/alokmenghrajani/pen/ExMBQow

  • Sabit başlık yerine, başlığın her zaman görünür kalması için sınırlı viewport yüksekliği kullanmayı öneriyorum DataGridXL(https://datagridxl.com) gibi yapılabilir. Not: Bunu ben yaptım

    • Aklıma gelen bir düşünce sadece; bu yöntem işaretleme aygıtı olmadan, örneğin yalnızca klavye ile gezinmeyi çok zorlaştırıyor
    • Eleştirmek için söylemiyorum ama mobilde bu yaklaşımı hiç sevmedim. İçeriğin sayfayla birlikte kayması gerektiğini düşünüyorum