Hogyan készítsünk reszponzív táblákat tiszta CSS-sel a Grid Layout Module segítségével

TL; DR

A hasonló adatok gyűjteményének megjelenítésének legnépszerűbb módja a táblázatok használata, de a HTML táblák hátránya, hogy nehezen reagálhatók.

Ebben a cikkben a CSS Grid Layout Module és a CSS Properties (és nincs Javascript) segítségével táblázatok elrendezésére használom az oszlopokat a képernyő szélességétől függően, amelyek tovább változnak kártyára a kis képernyők elrendezése alapján.

A türelmetlenek számára nézze meg a következő tollat ​​egy prototípusos megvalósításhoz.

Az érzékeny HTML táblázatok kis története

Az adaptív táblázatok nem új téma, és számos megoldást kínálnak, amelyeket már javasoltak. A 2012-ben Chris Coyier által először kiadott „Responsive Table Data Roundup” nagyon szépen összefoglalta a dolgokat (ideértve a 2018-as frissítést is).

Vasan Subramanian „Valójában reagálóképes táblázatok a CSS3 Flexbox használatával” bemutatja az oszlopok csomagolásának ötletét, amelyet a Flexbox segítségével valósítottak meg.

Annak ellenére, hogy sok érdekes ötletet javasoltak, a könyvtárak, például a bootstrap, a kis képernyők vízszintes görgetését választják.

Mivel most megvan a CSS Grid, úgy gondolom, hogy lehet egy jobb közös alternatívánk a vízszintes görgetéshez.

HTML táblázatok

Az alapoktól kezdve a HTML-ben található táblázat elrendezési formátum, amely az elemek gyűjteményét sorok és oszlopok mátrixán keresztül jeleníti meg. Az elemeket sorokba rendezik, ugyanazon adatattribútumokkal ugyanazokban az oszlopokban, a sorokat gyakran egy vagy több rendezhető attribútummal rendezve. A formátum madártávlatból ad képet nagy mennyiségű adat gyors megragadásáról és vizsgálatáról.

Például itt van egy hipotetikus táblázat a vásárlási rendelés részleteiről, amelyet a vásárlási alkalmazásban láthat.

A cikk ebben az esetben egy megrendelés részlete, amelynek olyan attribútumai vannak, mint alkatrész száma, alkatrészleírás stb.

HTML táblák használata esetén az adatok elrendezése keményen kódolva van sorok és oszlopok formájában (pl. És ). Ez elegendő lehet a teljes asztalszélességnek megfelelő képernyő használatához, de a valóságban ez nem vonatkozik a manapság létező számtalan eszközre. A feltörések tekintetében megváltoztathatja a táblák megjelenítési tulajdonságait, és használhat bármilyen elrendezést, amelyet általában a CSS-sel végezhet, de ez szemantikailag nem tűnik helyesnek.

Újra definiált táblázatok (= elemek gyűjteménye)

Kezdjük azzal, hogy újradefiniáljuk, hogyan kell kifejezni a táblázat adatait HTML-ben.

Mint korábban említettük, mivel a táblázatok adatai lényegében rendezett elemek gyűjteménye, természetesnek tűnik a rendezett listák használata. Továbbá, mivel a táblázatokat gyakran használják a szöveges leírások kiegészítésére, természetesnek tűnik ezt egy szakaszba csatolni, de ez a tábla adatainak felhasználásának összefüggéseitől függ.


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

A vanília az elemattribútumok kifejezésére szolgál, mivel a HTML5 nem határoz meg ehhez megfelelő címkét. A legfontosabb itt szemantikailag hasonló attribútumok kifejezése a 's hierarchiájaként . Ezt a struktúrát fogják használni az adatok elrendezésének meghatározásakor. Erre visszatérek a következő szakaszban a stílus témájáról.

Ami az elemen belüli tényleges adatokat illeti , a lista első eleme a fejléc, a többi elem pedig a tényleges adat.

Itt az ideje, hogy elkezdjünk beszélni az elemek CSS Griddel való stílusáról.

Stíluselemek gyűjteményei

Az alapötlet az, hogy az elem összes attribútumát normál táblázatként jelenítsük meg, a megjelenítési szélesség megengedi. Ennek az elrendezésnek az a luxusa, hogy a lehető legtöbb elemet (sort) láthatja.

Amikor a kijelző szélessége szűkül, néhány attribútum függőlegesen kerül egymásra, a vízszintes helytakarékosság érdekében. A halmozási attribútumok megválasztásának a következőkön kell alapulnia:

  1. Van-e értelme az attribútumoknak függőlegesen egymásra rakva? és,
  2. Függőlegesen rakva vízszintes helyet takarít meg?

Amikor a szélesség tovább csökken egy mobil eszköz méretére, minden elem kártyaként jelenik meg. Ennek az elrendezésnek redundanciája van, mert az attribútumok nevei többször is megjelennek minden kártyán, és a legkevésbé pillanthatók, de nem veszélyezteti a használhatóságot (például vízszintes görgetés, szuper kis szöveg stb.).

Merüljünk bele a részletekbe.

Styling 1. lépés: Teljes asztal

Itt van egy vizuális összefoglaló arról, hogy miként valósulnak meg a dolgok a CSS Grid segítségével.

Az oszlopok burkolásához több rácstartályt definiálnak hierarchiaként. A piros négyzet rácstartály minden sorhoz, a kék doboz pedig minden oszlopcsoport tárolója, amely beburkolódik.

Kezdjük azzal, hogy a listát rács-konténerként állítjuk be azáltal, hogy meghatározzuk a meghívott osztályt .item-containerés alkalmazzuk a

  • (a piros doboz).

    .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.