Дизайн адаптивной таблицы

Oracle Content Management предоставляет пример CSS адаптивной таблицы в компоненте абзаца, который позволяет реализовать многоярусное отображение данных строк на мобильных устройствах.

Адаптивная таблица настраивает таблицу для эффективного отображения контента в зависимости от размера экрана. Например, на веб-странице таблица из 5 столбцов хорошо отображается горизонтально, но при просмотре на телефоне данные могут быть лучше представлены в виде стека. Обратите внимание, что для правильного поведения адаптивным таблицам требуется строка заголовка.

В следующем созданном HTML-коде обратите внимание на то, что в каждую ячейку таблицы добавлен атрибут data-label со значениями, совпадающими с текстом заголовка столбца.

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

Если этот атрибут находится в каждой ячейке, при применении приведенных ниже правил CSS теги TD накладываются друг на друга.

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

Обратите внимание, что приведенное ниже правило для мультимедиа запрашивает размер экрана и вступает в силу, только если размер экрана меньше 767 пикселей:

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

Пример кода для использования CSS, чтобы разрешить вставленным таблицам быть адаптивными, находится в файле design.css предоставленной темы StarterTheme. При построении сайта на основе StarterTheme таблицы, вставленные в ячейку абзаца, по умолчанию будут адаптивными. Чтобы вставить таблицу, выполните указанные ниже действия.

1. В разделе Oracle Content Management откройте сайт и переключитесь в режим Настройки.
2. Создайте новое обновление или выберите существующее обновление для изменения.
3. Перетащите новый компонент абзаца на страницу и щелкните там, где требуется вставить таблицу, или в существующем абзаце, где требуется вставить таблицу.
4. На панели инструментов форматированного текста нажмите и задайте свойства таблицы. Убедитесь, что первая строка выбрана в качестве заголовка, и отрегулируйте ширину таблицы для эффективной работы на самом маленьком экране, который предполагается использовать. Например, если ожидается, что сайт будет отображаться на телефоне, ширина по умолчанию в 767 пикселей будет слишком большой, чтобы полностью отобразиться на экране телефона, даже в многоярусном виде. Можно задать меньшую ширину таблицы, например 300 пикселей, или установить ширину на 100 %.

По завершении переключитесь обратно в режим просмотра и выберите вариант просмотра с шириной экрана менее 767 пикселей для предварительного просмотра результатов. Режим просмотра необходим, так как таблица не ведет себя адаптивно в режиме редактирования.

Если при построении сайта на основе другой темы планируется использовать адаптивные таблицы, код из файла design.css StarterTheme необходимо скопировать в файл design.css используемой темы.

1. Чтобы скопировать код из файла design.css темы StarterTheme, на боковой панели навигации Oracle Content Management нажмите Разработчик.
2. Нажмите Просмотреть все темы.
3. Выберите StarterTheme и нажмите Открыть.
4. Нажмите имена проектов, чтобы открыть папку, а затем нажмите По умолчанию.
5. Выберите файл design.css в теме StarterTheme и нажмите Выгрузить.
6. Откройте файл в текстовом редакторе и найдите раздел файла, который начинается с комментария An example CSS of how to render a table responsively (Пример использования CSS для адаптивного рендеринга таблицы).
7. Выделите код до следующего комментария и скопируйте его.

   /**
    * 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. Повторите эти действия, чтобы выгрузить файл design.css шаблона, который необходимо изменить. Откройте шаблон и вставьте скопированный код в файл.
9. Сохраните изменения и загрузите измененный файл design.css в изменяемую тему как новую версию.