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.Strona internetowa pokazywana poziomo i pionowo

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 Ikona "Wstaw tabelę", 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.

Podgląd serwisu w trybie wyświetlania

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.