Návrh responzívnej tabuľky

Služba Oracle Content Management obsahuje v rámci komponentu odseku ukážku štýlu CSS responzívnej tabuľky, ktorý umožňuje vrstvenie dát riadkov pri zobrazení v mobilných zariadeniach.

Responzívna tabuľka prispôsobí veľkosť tabuľky veľkosti obrazovky tak, aby sa obsah zobrazoval efektívne. Napríklad tabuľka s 5 stĺpcami sa môže na webovej stránke pri vodorovnom zobrazení zobrazovať správne, no na prezentáciu dát v telefóne môže byť vhodnejšie vrstvené zobrazenie. Nezabúdajte, že responzívne tabuľky vyžadujú na správne fungovanie riadok hlavičky.

V nasledujúcom generovanom kóde HTML si všimnite, že do každej bunky tabuľky bol pridaný atribút data-label s hodnotami, ktoré sa zhodujú s textom hlavičky stĺpca.

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

Po nastavení tohto atribútu pre každú bunku sa bunky navrstvia jedna na druhú po použití nižšie uvedených pravidiel CSS.

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

Všimnite si, že nižšie uvedené pravidlo médií zistí veľkosť obrazovky a použije sa len vtedy, ak je rozlíšenie obrazovky menšie ako 767 pixelov:

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

Príklad kódu na povolenie responzívnych tabuliek pomocou CSS nájdete v predvolenom súbore design.css motívu StarterTheme. Ak vytvárate lokalitu na základe motívu StarterTheme, tabuľky, ktoré vložíte do slotu odseku, budú predvolene responzívne. Ako vložiť tabuľku:

1. V službe Oracle Content Management otvorte lokalitu a prepnite do režimu úprav.
2. Vytvorte novú aktualizáciu alebo vyberte existujúcu aktualizáciu, ktorú chcete upraviť.
3. Potiahnite na stránku nový komponent odseku a kliknite na miesto, kam chcete vložiť tabuľku, alebo kliknite na existujúci odsek, do ktorého chcete vložiť tabuľku.
4. Kliknite na ikonu na paneli s nástrojmi formátového textu a nastavte vlastnosti tabuľky. Nezabudnite vybrať prvý riadok ako hlavičku a šírku tabuľky nastaviť tak, aby sa obsah zobrazoval správne aj na najmenších obrazovkách, ktoré by sa mohli používať. Ak napríklad očakávate, že sa lokalita bude zobrazovať na telefónoch, predvolená šírka 767 pixelov bude pravdepodobne príliš široká pre plné zobrazenie na obrazovke telefónu, a to aj pri vrstvení. V tomto prípade odporúčame šírku tabuľky nastaviť na menšiu hodnotu, napríklad 300 pixelov, alebo ju nastaviť na 100 %.

Keď skončíte, prepnite späť do režimu zobrazenia a výberom voľby zobrazenia so šírkou obrazovky menšou ako 767 pixelov zobrazte ukážku výsledku. Je nevyhnutné prejsť do režimu zobrazenia, pretože tabuľky sa nesprávajú responzívne v režime úprav.

Ak chcete responzívne tabuľky používať aj pri vytváraní lokality na základe iného motívu, bude potrebné skopírovať kód zo súboru design.css motívu StarterTheme do súboru design.css vybraného motívu.

1. Ak chcete skopírovať kód zo súboru design.css motívu StarterTheme, kliknite na položku Vývojár na bočnom navigačnom paneli v službe Oracle Content Management.
2. Kliknite na položku Zobraziť všetky motívy.
3. Vyberte motív StarterTheme a kliknite na tlačidlo Otvoriť.
4. Kliknutím na návrhy otvorte priečinok a potom kliknite na položku predvolené.
5. Vyberte súbor design.css v motíve StarterTheme a kliknite na tlačidlo Stiahnuť.
6. Otvorte súbor v textovom editore a vyhľadajte tú časť súboru, ktorá sa začína komentárom An example CSS of how to render a table responsively.
7. Označte kód až po nasledujúci komentár a skopírujte ho.

   /**
    * 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. Zopakujte kroky na stiahnutie súboru design.css šablóny, ktorú chcete upraviť, otvorte šablónu a prilepte skopírovaný kód do súboru.
9. Uložte zmeny a upravený súbor design.css nahrajte ako novú revíziu do motívu, ktorý upravujete.