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:
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.
/** * 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; } }