Grid Layout Module kullanarak saf CSS ile duyarlı tablolar nasıl oluşturulur

TL; DR

Benzer verilerin bir koleksiyonunu görüntülemenin en popüler yolu tabloları kullanmaktır, ancak HTML tablolarının duyarlı hale getirilmesinin zor olma dezavantajı vardır.

Bu makalede, ekran genişliğine bağlı olarak sütunları saran, küçük ekranlar için mizanpajı temel alan bir karta daha da dönüşen mizanpaj tabloları için CSS Grid Layout Module ve CSS Properties (Javascript kullanmıyorum) kullanıyorum.

Sabırsız olanlar için, prototip bir uygulama için aşağıdaki kaleme bakın.

Duyarlı HTML Tablolarının Biraz Tarihi

Duyarlı tablolar yeni bir konu değildir ve halihazırda önerilen birçok çözüm vardır. İlk olarak 2012'de Chris Coyier tarafından yayınlanan "Responsive Table Data Roundup", her şeyi çok düzgün bir şekilde özetledi (2018 güncellemesi dahil).

Vasan Subramanian'ın "CSS3 Flexbox kullanan Gerçekten Duyarlı Tablolar", Flexbox ile uygulanan sütunları sarma fikrini gösteriyor.

Birçok ilginç fikir öne sürülmüş olsa da, bootstrap gibi kütüphaneler küçük ekranlar için yatay kaydırmayı tercih ediyor.

Artık CSS Izgaramız olduğu için, yatay kaydırmaya daha iyi bir ortak alternatifimiz olabileceğini düşünüyorum.

HTML Tabloları

Temel bilgilerden başlayarak, HTML'deki bir tablo, bir satır ve sütun matrisi aracılığıyla öğe koleksiyonlarını görüntülemek için bir düzen biçimidir. Öğeler, aynı sütunlarda aynı veri özniteliklerine sahip satırlar halinde yerleştirilir ve satırlar genellikle bir veya daha fazla sıralanabilir öznitelikle sıralanır. Biçim, büyük miktarda veriyi hızla kavramanız ve incelemeniz için size kuş bakışı bir görünüm sunar.

Örneğin, burada bir satın alma uygulamasında görebileceğiniz, satın alma siparişi ayrıntılarının varsayımsal bir tablosu verilmiştir.

Bu durumda bir kalem, parça numarası, parça açıklaması vb. Gibi özelliklere sahip bir satın alma siparişi ayrıntısıdır.

HTML tablolarını kullanırken, verilerin düzeni satırlar ve sütunlar (örneğin ve ) olarak kodlanır . Bu, tüm masa genişliğine uyan bir ekran tarafından kullanım için yeterli olabilir, ancak gerçekte bu, bugün var olan sayısız cihaz için geçerli değildir. Hack'ler açısından, tabloların görüntü özelliklerini değiştirebilir ve genel olarak CSS ile yapabileceğiniz herhangi bir düzeni kullanabilirsiniz, ancak bu anlamsal olarak doğru görünmüyor.

Yeniden Tanımlanan Tablolar (= Öğe Koleksiyonu)

Tablo verilerinin HTML'de nasıl ifade edilmesi gerektiğini yeniden tanımlayarak başlayalım.

Daha önce belirtildiği gibi, tablo verileri esasen sıralı bir öğe koleksiyonu olduğundan, sıralı listeleri kullanmak doğal görünmektedir. Ayrıca, tablolar genellikle metinsel açıklamaları desteklemek için kullanıldığından, bunu bir bölüme dahil etmek doğal görünmektedir, ancak bu, tablo verilerinin nasıl kullanıldığına bağlı olacaktır.


    
  1. # Part Number Part Description ...
  2. 1 100-10001 Description of part ...
  3. ...

Vanilya , HTML5 bunun için uygun bir etiket tanımlamadığından öğe özniteliklerini ifade etmek için kullanılır. Buradaki anahtar, anlamsal olarak benzer nitelikleri 's hiyerarşisi olarak ifade etmektir . Bu yapı, verilerin nasıl yerleştirilmesi gerektiğini tanımlarken kullanılacaktır. Stil konusunda bir sonraki bölümde buna geri döneceğim.

Öğenin içindeki gerçek verilere gelince , listedeki ilk öğe başlıktır ve öğelerin geri kalanı gerçek verilerdir.

Şimdi, CSS Izgarası ile öğeleri şekillendirme hakkında konuşmaya başlama zamanı.

Öğe Koleksiyonlarının Şekillendirilmesi

Buradaki temel fikir, öğenin tüm özelliklerini normal bir tablo olarak görüntülemektir, ekran genişliği izin verirse. Bu düzen, olabildiğince çok öğe (satır) görme lüksüne sahiptir.

Ekranın genişliği daraldığında, yatay alandan tasarruf etmek için bazı özellikler dikey olarak istiflenir. İstifleme özelliklerinin seçimi şunlara dayanmalıdır:

  1. Nitelikler dikey olarak istiflendiğinde anlamlı mı? ve,
  2. Dikey olarak istiflendiğinde yatay yerden tasarruf sağlar mı?

Genişlik bir mobil cihazın boyutuna daha da küçüldüğünde, her öğe bir kart olarak görüntülenir. Bu düzende fazlalık vardır, çünkü öznitelik adları her kartta tekrar tekrar görüntülenir ve en az göze alınabilirliğe sahiptir, ancak kullanılabilirlikten ödün vermez (örn. Yatay kaydırma, süper küçük metin, vb.).

Şimdi ayrıntılara girelim.

Şekillendirme Adım 1: Tam Masa

İşte CSS Grid ile işlerin nasıl uygulanacağının görsel bir özeti.

Sütunları sarmak için, birden çok ızgara kabı bir hiyerarşi olarak tanımlanır. Kırmızı kutu, her satır için bir ızgara kabıdır ve mavi kutu, saran her sütun grubu için bir kaptır.

Listeyi, çağrılan bir sınıfı tanımlayarak .item-containerve onu

  • (kırmızı kutu).

    .item-container { display: grid; grid-template-columns: 2em 2em 10fr 2fr 2fr 2fr 2fr 5em 5em; }

    The number of explicit columns specified with grid-template-columns is nine, which is the number of top-level 's, directly  under

  • .

    The column’s width is defined in relative length to make the columns wrap. The actual fraction has to be fine-tuned, based on the content.

    The columns that don’t wrap are defined in absolute length to maximize width usage for the wrapping columns. In the purchase order details example, the second column is a two-digit Id, so I set the width to double that size of 2 m’s.

    Next, we define another grid container called .attribute-container and apply it on all intermediate ’s under the list (the blue box).

    .attribute-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--column-width-min), 1fr)); }

    The minimum column width for all grid items under .attribute-container is specified with a CSS variable called --column-width-min(more on this later) using the minmax function, with the maximum set to take the rest of the space (e.g. one fraction). Since grid-template-columns are repeated, available horizontal space will be split into the maximum number of columns that could take at least --column-width-min, and the rest of the columns would go to the next line. The column’s width will be stretched if there is excess horizontal space because the repeat is auto-fited.

    Styling Step 2: Wrapping Table

    Next, --column-width-min needs to be specified independently for each column in order to wrap. Just to be clear, the variables need to be specified in order for the full table to render properly as well. To do this, a class is set for each .attribute-container, and a different --column-width-min is specified for each class scope.

    Let’s take a look at the HTML where .part-id is applied,

     Part Number Part Description 

    and the CSS:

    .part-id { --column-width-min: 10em; }

    This specific grid container will have two columns, as long as the available width is wider than 10em for each grid item (e.g. the grid container is wider than 20em). Once the grid container’s width becomes narrower than 20em, the second grid item will go to the next row.

    When we combine CSS properties like this, we need only one grid container .attribute-container, with the details changing where the class is applied.

    We can further nest .attribute-containers, to have multiple levels of wrapping with different widths, as in the following exert.

     Part Number Part Description Vendor Number Vendor Name .part-information { --column-width-min: 10em; } .part-id { --column-width-min: 10em; } .vendor-information { --column-width-min: 8em; }

    All of the above is enclosed in the following media query. The actual breakpoint should be selected based on the width necessary when your table is wrapped to the extreme.

    @media screen and (min-width: 737px) { ... }

    Styling Step Three: Card Layout

    The card layout will look like a typical form with attribute names in the first column and attribute values in the second column.

    To do this, a class called .attribute is defined and applied to all leaf tags under the

  • .

    .attribute { display: grid; grid-template-columns: minmax(9em, 30%) 1fr; }

    The attribute names are taken from a custom attribute of the leaf   called data-name, for example , and a pseudo-element is created. The pseudo-element will be subject to the grid container’s layout.

    .attribute::before { content: attr(data-name); }

    The first item in the list is the header and does not need to be displayed.

    /* Don't display the first item, since it is used to display the header for tabular layouts*/ .collection-container>li:first-child { display: none; }

    And finally, the cards are laid out in one column for mobile devices, but two for screens with a little bit more width, but not enough for displaying a table.

    /* 2 Column Card Layout */ @media screen and (max-width: 736px) { .collection-container { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px; } ... } /* 1 Column Card Layout */ @media screen and (max-width:580px) { .collection-container { display: grid; grid-template-columns: 1fr; } }

    Finishing Notes

    Accessibility is an area that wasn’t considered at all and may have some space for improvement.

    If you have any ideas or second thoughts, please feel free to comment!

    And of course, thanks for reading.