Návrh responzivní tabulky

Ve službě Oracle Content Management je v komponentě odstavce uveden ukázkový styl CSS responzivní tabulky, který umožňuje při zobrazení na mobilních zařízeních vrstvení dat řádků.

Responzivní tabulka upravuje tabulku tak, aby efektivně zobrazovala obsah v závislosti na velikosti obrazovky. Například tabulka s 5 sloupci se může dobře zobrazovat na webové stránce, ale při zobrazení na telefonu se mohou data zobrazovat spíše jako vrstvená. Responzivní tabulky musí mít řádek záhlaví, aby se chovaly správně.

Všimněte si v následujícím generovaném formátu HTML, že atribut popisek dat je přidán do každé buňky tabulky s hodnotami odpovídajícími textu záhlaví sloupce.

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

Jakmile je ve všech buňkách atribut, buňky TD se při použití níže uvedených pravidel CSS stohují nad sebou.

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

Níže uvedené pravidlo médií se dotazuje na velikost obrazovky a projeví se pouze v případě, že velikost obrazovky je menší než 767 pixelů:

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

Ukázka kódu pro použití css, který vloženým tabulkám umožní, aby byly responzivní, se nachází ve výchozím souboru design.css dodaného tématu StarterTheme. Vytváříte-li web z tématu StarterTheme, budou tabulky vložené do pozice odstavce ve výchozím nastavení responzivní. Postup vložení tabulky:

1. Ve službě Oracle Content Management otevřete web a přepněte jej do režimu Upravit.
2. Vytvořte novou aktualizaci nebo zvolte ke změně existující aktualizaci.
3. Přetáhněte na stránku novou komponentu odstavce a klikněte na místo, kam chcete tabulku vložit, nebo klikněte do existujícího odstavce na místo, kam chcete tabulku vložit.
4. Na panelu nástrojů formátovaného textu klikněte na a nastavte vlastnosti tabulky. Vyberte první řádek jako záhlaví a upravte šířku tabulky tak, aby se efektivně zobrazila na nejmenší obrazovce, na které očekáváte, že se použije. Očekáváte-li například, že se bude web zobrazovat na telefonu, bude výchozí šířka 767 pixelů pravděpodobně příliš široká na to, aby se na displeji telefonu kompletně zobrazila, a to dokonce i při vrstvení. Šířku tabulky byste chtěli nastavit na menší velikost, jako je 300 pixelů, nebo nastavit šířku na 100 %.

Po dokončení přepněte režim zpět na Zobrazení. Vyberte volbu zobrazení s jakoukoli šířkou obrazovky menší než 767 pixelů, a zobrazte tak náhled výsledků. Musí být aktivován režim zobrazení, protože v režimu Úpravy se tabulka nechová responzivně.

Chcete-li při vytváření webu z jiného tématu použít responzivní tabulky, budete muset zkopírovat kód ze souboru design.css tématu StarterTheme do souboru design.css tématu, které používáte.

1. Kód ze souboru design.css tématu StarterTheme zkopírujete kliknutím na volbu Vývojář v postranní navigaci služby Oracle Content Management.
2. Klikněte na volbu Zobrazit všechna témata.
3. Vyberte volbu StarterTheme a klikněte na tlačítko Otevřít.
4. Kliknutím na návrhy otevřete složku a poté klikněte na volbu výchozí.
5. Z tématu StarterTheme vyberte soubor design.css a klikněte na tlačítko Stáhnout.
6. Otevřete soubor v textovém editoru a vyhledejte sekci souboru začínající poznámkou Ukázková šablona CSS k responzivnímu vykreslení tabulky.
7. Vyberte kód až k další poznámce a zkopírujte jej.

   /**
    * 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. Opakujte kroky stažení souboru design.css šablony, kterou chcete upravit. Šablonu otevřete a vložte do souboru zkopírovaný kód.
9. Uložte změny a odešlete upravený soubor design.css jako novou revizi do tématu, které upravujete.