Bir Tablo Sütununda Min. Genişliği Numaralandırma

iyi ol' <table> etiketi, tablo verilerini göstermek için en anlamsal HTML'dir. Ancak tablonun nasıl sunulacağını, özellikle de her bir tablo hücresine ne kadar içerik girdiğini bilemeyeceğiniz dinamik bir ortamda sütun genişliklerini kontrol etmeyi çok zor buluyorum. Bazı durumlarda, bir sütun çok genişken diğerleri buruşuktur. Diğer zamanlarda, eşit genişlikler elde ederiz, ancak daha fazla içerik içeren ve daha fazla alana ihtiyaç duyan bir sütun pahasına.

Ancak, işleri biraz daha kolaylaştırmaya yardımcı olan bir CSS hileli geçici çözüm buldum. Bu yazıda size göstermek istediğim şey bu.

Sorun

Öncelikle, düzenin tarayıcı tarafından nasıl işlendiğini anlamamız gerekir. bizde var table-layout Bir tablonun her bir tablo sütunu için genişliği nasıl dağıtması gerektiğini tanımlamak için CSS'deki özellik. İki değerden birini alır:

• auto (Varsayılan)
• fixed

Sütunlarında herhangi bir genişlik tanımlamadan bir tablo ile başlayalım. Başka bir deyişle, tarayıcının her sütuna ne kadar genişlik vereceğine karar vermesine izin vereceğiz. table-layout: auto CSS'de. Fark edeceğiniz gibi, tarayıcı, sahip olduğu algoritma ile tüm kullanılabilir genişliği her bir sütun arasında bölmek için elinden gelenin en iyisini yapar.

Bir otomatik tablo düzenini ile değiştirirsek table-layout: fixed, ardından tarayıcı yalnızca tam kullanılabilir alanı toplam sütun sayısına böler ve ardından bu değeri her sütun için genişlik olarak uygular:

Peki ya sütunlarımızın genişliğini kontrol etmek istiyorsak? bizde var <colgroup> yardımcı olacak öğe! Bireysel oluşur <col> her sütun için ihtiyacımız olan tam genişliği belirtmek için kullanabileceğimiz öğeler. Bunun nasıl çalıştığını görelim table-layout: auto:

Örnek olsun diye stilleri satır içine aldım.

Toplandıklarında kullanılabilir tablo alanı miktarını aştıkları için tarayıcı satır içi genişliklere uymuyor. Sonuç olarak, tablo tüm sütunların görünür olması için sütunlardan alan çalar. Bu tamamen iyi bir varsayılan davranıştır.

Nasıl <colgroup> çalışmak table-layout: fixed. Hadi bulalım:

Bu hiç iyi görünmüyor. Sütunların geri kalanı için sabit bir genişliği korurken biraz esnemek için içinde bir sürü içerik bulunan sütuna ihtiyacımız var. bir sabit table-layout değer genişliğe saygı duyar - ancak o kadar çok ki, en çok alana ihtiyaç duyan sütunun alanını yer... ki bu bizim için uygun değildir.

Bir ayar yapabilseydik bu kolayca çözülebilirdi. min-width yerine sütunda width. Bu şekilde, sütun, "Bu minimum değere ulaşana kadar hepinize genişliğimin bir kısmını verebilirim" derdi. Ardından tablo, kabından taşar ve kullanıcıya tablonun geri kalanını göstermesi için yatay bir kaydırma sağlar. Ama ne yazık ki, min-width tablodaki sütunlara saygı gösterilmez <col> eleman.

çözüm

Çözüm, sahte min-width ve bunu yapmak için biraz yaratıcı olmamız gerekiyor.

boş ekleyebiliriz <col> bizim için ikinci sütun olarak <colgroup> HTML'de ve bir colspan özelliği ilk sütunda, böylece ilk sütun her iki sütun için de yer kaplar:

<table> <colgroup> <col class="col-200" /> <col /> <col class="col-input" /> <col class="col-date" /> <col class="col-edit" /> </colgroup> <thead> <tr> <th colspan="2">Project name</th> <th>Amount</th> <th>Date</th> <th>Edit</th> </tr> </thead> <!-- etc. -->
</table>

Önceki örnekteki satır içi stillerin yerine sınıflar eklediğimi unutmayın. Aynı fikir hala geçerli: her sütuna genişlik uyguluyoruz.

İşin püf noktası, ilk arasındaki ilişkidir. <col> ve boş saniye <col>. İlkine bir genişlik uygularsak <col> (onun 200px Yukarıdaki snippet'te), sabit tablo düzeni kullanılabilir alanı sütunlara dağıtmak üzere böldüğünde ikinci sütun yenilecektir. Ancak ilk sütunun genişliği (200px) saygı duyulur ve yerinde kalır.

Voilà! bir sahtemiz var min-width bir masa hücresine ayarlayın. İlk hücre, kullanılabilir alan değiştikçe esner ve tablo, tam da olmasını umduğumuz gibi yatay kaydırma için taşar.

(biraz ekledim yapışkan konumlandırma oradaki ilk sütuna.)

Engellilerin kullanımları için uygunluk

Burada erişilebilirliği tamamen unutmayalım. Tabloyu Windows'ta NVDA ve macOS'ta VoiceOver üzerinden çalıştırdım ve yalnızca dördünü kullanıyor olsak bile beş sütunun da duyurulduğunu gördüm. Ve ilk sütun odaklandığında, "Birden ikiye kadar olan sütun" duyurusunu yapar. Mükemmel derecede zarif değil ama aynı zamanda birinin kaybolmasına da neden olmayacak. atabileceğimizi hayal ediyorum aria-hidden kullanılmayan sütundaki öznitelik, ancak ARIA'nın zayıf HTML'nin yerine geçmediğini de bilin.

---

Kabul edeceğim, bu biraz tuhaf hissettiriyor. Ama işe yarıyor! Yorumlarda farklı bir yaklaşımınız varsa veya bu "hack"in kullanıcılarımıza getirebileceği herhangi bir kafa karışıklığını biliyorsanız bana bildirin.

• SEO Destekli İçerik ve Halkla İlişkiler Dağıtımı. Bugün Gücünüzü Artırın.
• Plato blok zinciri. Web3 Metaverse Zekası. Bilgi Güçlendirildi. Buradan Erişin.
• Kaynak: https://css-tricks.com/faking-min-width-on-a-table-column/