Design da Tabela Responsiva

O Oracle Content Management fornece um exemplo de CSS de uma tabela responsiva dentro de um componente de parágrafo que permite o empilhamento de dados de linha quando exibidos em dispositivos móveis.

Uma tabela responsiva ajustará a tabela para exibir o conteúdo efetivamente dependente do tamanho da tela. Por exemplo, uma tabela de 5 colunas pode ser exibida horizontalmente em uma página da Web, mas quando visualizada em um telefone, os dados podem ser melhor apresentados como empilhados. Observe que as tabelas responsivas precisam de uma linha de cabeçalho para se comportar corretamente.

No HTML gerado a seguir, observe que há um atributo de label de dados adicionado a cada célula da tabela com valores correspondentes ao texto do cabeçalho da coluna.

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

Quando esse atributo está em cada célula, os TDs se empilham quando você aplica as regras de CSS abaixo.

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

Observe que a regra de mídia abaixo consulta o tamanho da tela e só terá efeito quando o tamanho da tela for menor que 767 pixels:

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

O exemplo de código para usar css para permitir que as tabelas inseridas sejam responsivas está localizado no design.css padrão do StarterTheme fornecido. Ao criar um site usando o StarterTheme, as tabelas inseridas em um slot de parágrafo serão responsivas por padrão. Para inserir uma tabela:

1. No Oracle Content Management, abra um site e alterne para o modo Editar.
2. Crie uma nova atualização ou escolha uma atualização existente para modificar.
3. Arraste um novo componente de parágrafo para a página e clique no local em que deseja inserir uma tabela ou clique em um parágrafo existente onde deseja inserir uma tabela.
4. Na barra de ferramentas rich text, clique em e defina as propriedades da tabela. Certifique-se de selecionar a primeira linha como um cabeçalho e ajuste a largura da tabela para funcionar efetivamente na menor tela que se espera que seja usada. Por exemplo, se você espera que o site seja exibido em um telefone, a largura padrão de 767 pixels provavelmente será muito larga para ser exibida totalmente na tela do telefone, mesmo quando empilhada. Você deseja definir a largura da tabela para um tamanho menor, como 300 pixels, ou definir a largura para 100%.

Quando terminar, volte ao modo Exibir e selecione uma opção de exibição com largura de tela menor que 767 pixels para visualizar os resultados. Você deve estar no modo de exibição, pois uma tabela não se comporta responsivamente no modo de Edição.

Se você quiser usar tabelas responsivas ao criar um site de um tema diferente, será necessário copiar o código do StarterTheme design.css para o arquivo design.css do tema que você está usando.

1. Para copiar o código do StarterTheme design.css, clique em Desenvolvedor na navegação lateral do Oracle Content Management.
2. Clique em Exibir Todos os Temas.
3. Selecione o StarterTheme e clique em Abrir.
4. Clique em designs para abrir a pasta e clique em padrão.
5. Selecione o arquivo design.css do StarterTheme e clique em Fazer Download.
6. Abra o arquivo em um editor de texto e localize a seção do arquivo que começa com o comentário Um exemplo de CSS de como renderizar uma tabela de forma responsiva.
7. Selecione o código até o próximo comentário e copie-o.

   /**
    * 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. Repita as etapas para baixar o arquivo design.css do modelo que você deseja modificar, abra o modelo e cole o código copiado no arquivo.
9. Salve as alterações e faça upload do arquivo design.css modificado como uma nova revisão para o tema que você está modificando.