Design tabel responsiv

Oracle Content Management oferă un exemplu de foaie de stil în cascadă cu un tabel adaptabil din cadrul unei componente de paragraf, care permite afişarea pe verticală a datelor de pe rânduri în momentul afişării pe dispozitive mobile.

Un tabel responsiv se va ajusta pentru a afişa conţinutul în mod corespunzător, în funcţie de dimensiunea ecranului. De exemplu, un tabel cu 5 coloane se poate afişa corespunzător pe orizontală pe o pagină web, dar atunci când este vizualizat pe un telefon, datele pot fi prezentate mai bine pe verticală. Reţineţi că, pentru un comportament corect, tabelele responsive au nevoie de un rând de antet.

În următorul HTML generat puteţi observa că la fiecare celulă de tabel a fost adăugat un atribut de etichetă de date, cu valori care se potrivesc cu textul din antetul coloanelor.

<thead>
    <tr>
        <th scope="col">ACCOUNT</th>
        <th scope="col">DUE DATE</th>
        <th scope="col">AMOUNT</th>
        <th scope="col">MINIMUM</th>
        <th scope="col">PERIOD</th>
    </tr>
</thead>

<tbody>
    <tr>
        <td data-label="ACCOUNT">Visa</td>
        <td data-label="DUE DATE">04/16/2020</td>
        <td data-label="AMOUNT">$3,090</td>
        <td data-label="PERIOD">03/09/2020 - 04/08/2020</td>
    </tr>

După ce acel atribut este asociat cu fiecare celulă, datele din tabel vor fi afişate pe verticală atunci când aplicaţi regulile pentru foaia de stil în cascadă de mai jos.

  .scs-paragraph:not(.scs-paragraph-edit) table td {
    border-bottom: 1px solid #ddd;
    display: block;
    text-align: right;
  }

  .scs-paragraph:not(.scs-paragraph-edit) table td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
  }

Reţineţi că regula pentru conţinut media de mai jos interoghează dimensiunea ecranului şi va fi aplicată numai atunci când dimensiunea ecranului este mai mică de 767 pixeli:

@media screen and (max-width: 767px) {

Exemplul de cod pentru utilizarea foilor de stil în cascadă pentru a permite configurarea ca responsive a tabelelor inserate se află în fişierul design.css prestabilit al temei starter furnizate. În cazul în care construiţi un site pe baza temei starter, tabelele introduse într-un slot de paragraf vor fi în mod prestabilit responsive. Pentru a insera un tabel:

1. În Oracle Content Management, deschideţi un site şi comutaţi la modul Editare.
2. Creaţi o actualizare nouă sau alegeţi o actualizare existentă pe care să o modificaţi.
3. Trageţi o componentă de paragraf nouă în pagină şi faceţi clic pe locul în care doriţi să inseraţi un tabel sau faceţi clic într-un paragraf existent în care doriţi să inseraţi un tabel.
4. În bara cu instrumente de formatare, faceţi clic pe şi setaţi proprietăţile tabelului. Trebuie să setaţi primul rând ca antet şi să ajustaţi lăţimea tabelului astfel încât să se comporte corect pe cel mai mic ecran care se preconizează a fi utilizat. De exemplu, dacă preconizaţi că site-ul va fi vizualizat pe un telefon, lăţimea prestabilită de 767 pixeli va fi probabil prea mare pentru a fi afişată complet pe ecranul telefonului, chiar şi atunci când datele sunt afişate pe verticală. Veţi dori să setaţi lăţimea tabelului la o dimensiune mai mică, de exemplu, 300 de pixeli, sau să setaţi lăţimea la 100%.

Când terminaţi, comutaţi înapoi la modul Vizualizare şi selectaţi o opţiune de vizualizare cu o lăţime a ecranului mai mică de 767 pixeli pentru a previzualiza rezultatele. Trebuie să vă aflaţi în modul de vizualizare, deoarece tabelele nu au un comportament responsiv în modul Editare.

Dacă doriţi să utilizaţi tabele responsive atunci când construiţi un site pe baza altei teme, va trebui să copiaţi codul din fişierul design.css al temei starter în fişierul design.css al temei pe care doriţi să o utilizaţi.

1. Pentru a copia codul din fişierul design.css al temei starter, faceţi clic pe Dezvoltator în zona de navigare în site din Oracle Content Management.
2. Faceţi clic pe Vizualizare toate temele.
3. Selectaţi Temă starter şi faceţi clic pe Deschidere.
4. Faceţi clic pe designuri pentru a deschide folderul, apoi faceţi clic pe prestabilit.
5. Selectaţi fişierul design.css din tema starter şi faceţi clic pe Descărcare.
6. Deschideţi fişierul într-un editor de text şi reperaţi în fişier secţiunea care începe cu comentariul Un exemplu de foaie de stil în cascadă pentru randarea responsivă a unui tabel.
7. Selectaţi codul până la următorul comentariu şi copiaţi-l.

   /**
    * An example CSS of how to render a table responsively.
    * It enables stacking of row data on mobile devices.
    * Only do this for view mode (not for edit mode).
    *
    * On each cell rendered, it adds a user-defined attribute 
    * 'data-label' with value matching the column header text.
    */
    @media screen and (max-width: 767px) {
     .scs-paragraph:not(.scs-paragraph-edit) table {
       border: 0;
     }
   
     .scs-paragraph:not(.scs-paragraph-edit) table caption {
       font-size: 1.3em;
     }
   
     .scs-paragraph:not(.scs-paragraph-edit) table thead {
       border: none;
       clip: rect(0 0 0 0);
       height: 1px;
       margin: -1px;
       overflow: hidden;
       padding: 0;
       position: absolute;
       width: 1px;
     }
   
     .scs-paragraph:not(.scs-paragraph-edit) table tr {
       border-bottom: 3px solid #ddd;
       display: block;
       margin-bottom: .625em;
     }
   
     .scs-paragraph:not(.scs-paragraph-edit) table td {
       border-bottom: 1px solid #ddd;
       display: block;
       text-align: right;
     }
   
     .scs-paragraph:not(.scs-paragraph-edit) table td::before {
       content: attr(data-label);
       float: left;
       font-weight: bold;
     }
   
     .scs-paragraph:not(.scs-paragraph-edit) table td:last-child {
       border-bottom: 0;
     }
   }

8. Repetaţi paşii pentru a descărca fişierul design.css al şablonului pe care doriţi să-l modificaţi, deschideţi şablonul şi lipiţi codul copiat în fişier.
9. Salvaţi modificările şi încărcaţi fişierul design.css modificat ca o versiune nouă în tema modificată.