Projekt tabeli responsywnej

Oracle Content Management udostępnia przykładowy arkusz CSS responsywnej tabeli w obszarze składnika "akapit"; tabela ta umożliwia przedstawianie danych (danych z poszczególnych wierszy) w postaci stosu, gdy jest wyświetlana w urządzeniach mobilnych.

Tabela responsywna dostosowuje się do skutecznego wyświetlania zawartości w zależności od rozmiaru ekranu. Na przykład 5-kolumna tabela może się dobrze wyświetlać poziomo na stronie internetowej, lecz — gdy jest wyświetlana w telefonie — dane mogą się lepiej prezentować w postaci stosu. Tabele responsywne do poprawnego działania wymagają wiersza nagłówka.

W poniższym wygenerowanym kodzie HTML do każdej komórki tabeli został dodany atrybut "data-label" z wartością odpowiadającą polu z wiersza nagłówka.

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

Jeśli atrybut ten będzie przypisany do poszczególnych komórek, to wartości TD będą układane w stos, gdy zostaną zastosowane poniższe reguły 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;
  }

Poniższa reguła "media" kieruje zapytanie o rozmiar ekranu i zaczyna obowiązywać wtedy, gdy rozmiar ten jest mniejszy niż 767 pikseli:

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

Przykładowy kod z użyciem css, umożliwiający wstawianie tabel jako responsywnych, znajduje się w domyślnym pliku design.css udostępnianego motywu początkowego StarterTheme. Jeśli serwis jest konstruowany przy użyciu motywu StarterTheme, tabele wstawiane do gniazda "akapit" będą domyślnie tabelami reponsywnymi. Aby wstawić tabelę, należy:

1. W Oracle Content Management otworzyć serwis, a następnie przełączyć do trybu edycji.
2. Aby zmodyfikować, utworzyć nową aktualizację lub wybrać już istniejącą.
3. Przeciągnąć nowy składnik "akapit" na stronę, po czym kliknąć w miejscu (albo w istniejącym akapicie), w którym ma zostać wstawiona tabela.
4. Na pasku narzędzi tekstu z formatowaniem nacisnąć przycisk , po czym ustawić właściwości tabeli. Wybrać pierwszy wiersz jako nagłówek, po czym dostosować szerokość tabeli do przewidywanego najmniejszego ekranu. Na przykład, jeśli serwis ma być wyświetlany w telefonie, to domyślna szerokość 767 pikseli prawdopodobnie będzie zbyt duża, nawet przy wyświetlaniu w postaci stosu. Można wówczas ustawić mniejszą szerokość tabeli (na przykład 300 pikseli) lub na 100%.

Po zakończeniu wrócić do trybu wyświetlania, po czym — aby zobaczyć wyniki — wybrać opcję widoku z szerokością ekranu mniejszą niż 767 pikseli. Trzeba się przełączyć do trybu wyświetlania, ponieważ w trybie edycji tabela nie zachowuje się responsywnie.

Chcąc używać tabel responsywnych i konstruować serwis z innego motywu, trzeba skopiować plik design.css z motywu StarterTheme do pliku design.css tego innego motywu.

1. Aby skopiować kod z pliku design.css z motywu StarterTheme, wybrać z bocznej nawigacji (w Oracle Content Management) opcję Programista.
2. Nacisnąć przycisk Wyświetl wszystkie motywy.
3. Wybrać motyw StarterTheme, po czym nacisnąć przycisk Otwórz.
4. Wybrać "Projekty", aby otworzyć folder, a następnie wybrać opcję Domyślne.
5. Wybrać z motywu StarterTheme plik design.css, po czym nacisnąć przycisk Pobierz.
6. Otworzyć plik w edytorze tekstów, po czym odszukać sekcję pliku zaczynającą się komentarzem An example CSS of how to render a table responsively.
7. Zaznaczyć kod aż do następnego komentarza i skopiować zaznaczony fragment.

   /**
    * 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. Powtórzyć czynności w celu pobrania pliku design.css modyfikowanego szablonu, otworzyć szablon, po czym wkleić skopiowany kod.
9. Zapisać zmiany, po czym wysłać zmodyfikowany plik design.css (jako nową wersję) do modyfikowanego motywu.