TL; DR

Cea mai populară modalitate de a afișa o colecție de date similare este utilizarea tabelelor, dar tabelele HTML au dezavantajul de a fi dificil de reacționat.

În acest articol, folosesc CSS Grid Layout Module și CSS Properties (și fără Javascript) pentru tabele de layout care înfășoară coloane în funcție de lățimea ecranului, care se schimbă în continuare pe un card bazat pe aspect pentru ecrane mici.

Pentru cei nerăbdători, uitați-vă la următorul stilou pentru o implementare prototipică.

O mică istorie a tabelelor HTML responsive

Tabelele responsive nu sunt un subiect nou și există multe soluții care au fost deja propuse. „Rezumatul datelor tabelului receptiv” publicat pentru prima dată în 2012 de Chris Coyier, are rezumate foarte bine (inclusiv o actualizare din 2018).

„Tabelele cu adevărat receptive folosind CSS3 Flexbox” de Vasan Subramanian arată o idee de împachetare a coloanelor, implementată cu Flexbox.

Chiar dacă au fost propuse multe idei interesante, bibliotecilor le place bootstrap optați pentru derulare orizontală pentru ecrane mici.

Deoarece acum avem CSS Grid, cred că am putea avea o alternativă comună mai bună la defilarea orizontală.

Tabelele HTML

Începând cu elementele de bază, un tabel în HTML este un format de aspect pentru afișarea colecțiilor de articole printr-o matrice de rânduri și coloane. Elementele sunt așezate în rânduri, cu aceleași atribute de date în aceleași coloane, rândurile fiind adesea sortate cu unul sau mai multe atribute sortabile. Formatul vă oferă o vedere panoramică pentru a înțelege și a examina rapid cantități mari de date.

De exemplu, iată un tabel ipotetic cu detaliile comenzii de cumpărare, pe care îl puteți vedea într-o aplicație de cumpărare.

Cum sa creati tabele responsive cu CSS pur folosind modulul
Tabelul detaliilor comenzii de cumpărare

Un articol, în acest caz, este un detaliu al comenzii de cumpărare, care are atribute precum numărul piesei, descrierea piesei etc.

Atunci când se utilizează tabele HTML, aspectul datelor este codificat în formă de rânduri și coloane (de ex <tr> și <td>). Acest lucru poate fi suficient pentru utilizarea unui ecran care se potrivește cu întreaga lățime a mesei, dar în realitate, acest lucru nu se aplică pentru o multitudine de dispozitive care există astăzi. În ceea ce privește hacks, puteți modifica proprietatea de afișare a tabelelor și puteți utiliza orice aspect pe care îl puteți face cu CSS în general, dar acest lucru nu pare semantic corect.

Tabelele redefinite (= Colecția de articole)

Să începem prin redefinirea modului în care datele tabelelor trebuie exprimate în HTML.

După cum sa menționat anterior, deoarece datele din tabel sunt în esență o colecție ordonată de articole, pare firesc să se utilizeze liste ordonate. De asemenea, întrucât tabelele sunt adesea folosite pentru a completa descrieri textuale, pare firesc să includem acest lucru într-o secțiune, dar acest lucru ar depinde de contextul în care sunt utilizate datele tabelului.

<section>
 <ol>
  <!-- The first list item is the header of the table -->
  <li>
   <div>#</div>
   <!-- Enclose semantically similar attributes as a div hierarchy -->
   <div>
    <div>Part Number</div>
    <div>Part Description</div>
   </div>
   ...
  </li>
  <!-- The rest of the items in the list are the actual data -->
  <li>
   <div>1</div>
   <!-- Group part related information-->
   <div>
    <div>100-10001</div>
    <div>Description of part</div>
   </div>
  ...
  </li>
 ...
 </ol>
</section>

Vanilie <div>sunt folosite pentru a exprima atributele articolelor, deoarece HTML5 nu definește o etichetă adecvată pentru aceasta. Cheia aici este de a exprima atribute similare semantic ca o ierarhie a <div>‘s. Această structură va fi utilizată la definirea modului în care ar trebui prezentate datele. Voi reveni la acest lucru în următoarea secțiune pe tema stilului.

În ceea ce privește datele reale din interiorul <div> element, primul element din listă este antetul, iar restul articolelor sunt datele reale.

Acum, este timpul să începem să vorbim despre stilarea articolelor cu CSS Grid.

Colecții de articole de styling

Ideea de bază aici este de a afișa toate atributele articolului ca un tabel normal, lățimea de afișare permițând. Acest aspect are luxul de a putea vedea cât mai multe articole (rânduri) posibil.

1611678367 662 Cum sa creati tabele responsive cu CSS pur folosind modulul
Masă completă

Când lățimea afișajului devine mai îngustă, unele atribute sunt stivuite vertical, pentru a economisi spațiu orizontal. Alegerea atributelor de stivuire ar trebui să se bazeze pe:

  1. Atributele au sens atunci când sunt stivuite vertical? și,
  2. Când este stivuit vertical, economisește spațiu orizontal?
1611678368 937 Cum sa creati tabele responsive cu CSS pur folosind modulul
Înfășurarea tabelului 1. Începeți prin înfășurarea coloanelor care au nevoie de lățime mică și acordați celorlalte coloane spațiu
1611678368 70 Cum sa creati tabele responsive cu CSS pur folosind modulul
Tabel de ambalare 2. Înfășurați „Descrierea piesei”, pentru a putea vedea descrierea
1611678368 40 Cum sa creati tabele responsive cu CSS pur folosind modulul
Tabel de înfășurare 3. Înfășurați în continuare „Nume furnizor”
1611678369 158 Cum sa creati tabele responsive cu CSS pur folosind modulul
Tabel de împachetare 4. Înfășurați informații referitoare la furnizor sub informațiile legate de piese
1611678369 834 Cum sa creati tabele responsive cu CSS pur folosind modulul
Tabel de împachetare 5. Înfășurat complet

Când lățimea se micșorează la dimensiunea unui dispozitiv mobil, fiecare element este afișat ca un card. Acest aspect are redundanță, deoarece numele atributelor sunt afișate în mod repetat pe fiecare card și are cea mai mică vizibilitate, dar nu compromite utilizarea (de exemplu, defilare orizontală, text super mic etc.).

1611678369 237 Cum sa creati tabele responsive cu CSS pur folosind modulul
Aspect card cu două coloane
1611678369 196 Cum sa creati tabele responsive cu CSS pur folosind modulul
Aspectul unei cărți pe o coloană

Acum să ne scufundăm în detalii.

Etapa 1: Masă completă

Iată un rezumat vizual al modului în care lucrurile vor fi implementate cu CSS Grid.

1611678370 305 Cum sa creati tabele responsive cu CSS pur folosind modulul
Containere cu rețea

Pentru a înfășura coloanele, mai multe containere de rețea sunt definite ca o ierarhie. Caseta roșie este un container de grilă pentru fiecare rând, iar caseta albastră este un container pentru fiecare grup de coloane care se înfășoară.

Să începem prin setarea listei ca un container grilă prin definirea unei clase numite .item-container și aplicarea acestuia la <li>(caseta roșie).

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

Numărul de coloane explicite specificate cu grid-template-columns este nouă, care este numărul de nivel superior <div>este, direct sub <li>.

Lățimea coloanei este definită în lungime relativă pentru a face coloanele să se înfășoare. Fracția reală trebuie să fie ajustată, pe baza conținutului.

Coloanele care nu se înfășoară sunt definite în lungime absolută pentru a maximiza utilizarea lățimii coloanelor de înfășurare. În exemplul detaliilor comenzii de cumpărare, a doua coloană este un ID din două cifre, așa că am setat lățimea să dubleze acea dimensiune de 2 m.

Apoi, definim un alt container de grilă numit .attribute-container și aplicați-l pe toate intermediarele <div>se află sub listă (caseta albastră).

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

Lățimea minimă a coloanei pentru toate elementele de grilă de sub .attribute-container este specificat cu o variabilă CSS numită --column-width-min(mai multe despre aceasta mai târziu) folosind minmax funcție, cu setul maxim pentru a ocupa restul spațiului (de exemplu, o fracție). De cand grid-template-columns sunteți repeatEd, spațiul orizontal disponibil va fi împărțit în numărul maxim de coloane care ar putea dura cel puțin --column-width-min, iar restul coloanelor ar merge la linia următoare. Lățimea coloanei va fi întinsă dacă există exces de spațiu orizontal, deoarece repeat este auto-fited.

Pasul 2 de styling: Masă de împachetare

Următor →, --column-width-min trebuie să fie specificat independent pentru fiecare coloană pentru a încheia. Doar pentru a fi clar, variabilele trebuie să fie specificate pentru ca tabelul complet să fie redat și corect. Pentru a face acest lucru, este stabilită o clasă pentru fiecare .attribute-container, și altul --column-width-min este specificat pentru fiecare domeniu de clasă.

Să aruncăm o privire la HTML unde .part-id este aplicat,

<div class="attribute-container part-id">
    <div>Part Number</div>
    <div>Part Description</div>
</div>

și CSS:

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

Acest container de rețea specific va avea două coloane, atâta timp cât lățimea disponibilă este mai mare de 10em pentru fiecare element de rețea (de exemplu, containerul de rețea este mai mare de 20em). Odată ce lățimea containerului grilei devine mai îngustă decât 20em, al doilea element al grilei va trece la rândul următor.

Când combinăm astfel de proprietăți CSS, avem nevoie de un singur container de grilă .attribute-container, cu detaliile care se schimbă unde se aplică clasa.

Putem cuibări în continuare .attribute-containers, pentru a avea mai multe niveluri de împachetare cu lățimi diferite, ca în exercițiul următor.

<div class="attribute-container part-information">
    <div class="attribute-container part-id">
        <div class="attribute" data-name="Part Number">Part Number</div>
        <div class="attribute" data-name="Part Description">Part Description
    </div>
    </div>
    <div class="attribute-container vendor-information">
        <div class="attribute">Vendor Number</div>
        <div class="attribute">Vendor Name</div>
    </div>
</div>
.part-information {
    --column-width-min: 10em;
}
.part-id {
    --column-width-min: 10em;
}
.vendor-information {
    --column-width-min: 8em;
}

Toate cele de mai sus sunt incluse în următoarea interogare media. Punctul de întrerupere real ar trebui să fie selectat pe baza lățimii necesare atunci când masa este înfășurată la extrem.

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

Stilul Pasul trei: Aspectul cardului

Aspectul cardului va arăta ca un formular tipic cu nume de atribute în prima coloană și valori ale atributelor în a doua coloană.

Pentru a face acest lucru, o clasă numită .attribute este definit și aplicat pe toate frunzele <div> etichete sub <li>.

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

Numele atributelor sunt preluate dintr-un atribut personalizat al frunzei <div> numit data-name, de exemplu <div class=”attribute” data-name="Part Number">și se creează un pseudo-element. Pseudo-elementul va fi supus aspectului containerului grilei.

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

Primul element din listă este antetul și nu trebuie afișat.

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

Și, în cele din urmă, cardurile sunt așezate într-o singură coloană pentru dispozitivele mobile, dar două pentru ecrane cu o lățime puțin mai mare, dar nu suficient pentru afișarea unui tabel.

/* 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;
    }
}

Note de finisare

Accesibilitatea este un domeniu care nu a fost deloc luat în considerare și poate avea un spațiu de îmbunătățire.

Dacă aveți idei sau gânduri secundare, vă rugăm să nu ezitați să comentați!

Și, desigur, mulțumesc pentru lectură.