Design de Tabela Responsiva

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

Uma tabela responsiva ajustará a tabela de modo a apresentar o conteúdo de forma eficiente consoante o tamanho do ecrã. Por exemplo, uma tabela de 5 colunas poderá ser apresentada corretamente no modo horizontal numa página Web, mas quando visualizada num telefone, os dados poderão ser apresentados mais corretamente como empilhados. Repare que as tabelas responsivas precisam de uma linha de cabeçalho para poder ter um comportamento correto.

No seguinte HTML gerado, repare que existe um atributo de etiqueta de dados acrescentado 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>

Assim que esse atributo estiver em cada célula, os elementos de TD são empilhados na parte superior de cada um quando são aplicadas 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;
  }

Repare que a regra de multimédia abaixo consulta o tamanho do ecrã e só produzirá efeito quando o tamanho do ecrã for inferior a 767 píxeis:

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

O exemplo de código para a utilização de css para permitir que as tabelas inseridas sejam responsivas está localizado no design.css por omissão do StarterTheme fornecido. Se criar um site a partir de StarterTheme, as tabelas inseridas num slot de parágrafo serão responsivas por omissã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 onde pretende inserir uma tabela ou clique num parágrafo existente onde pretende inserir uma tabela.
4. Na barra de ferramentas de RTF, clique em e defina as propriedades da tabela. Certifique-se de que seleciona a primeira linha como um cabeçalho e ajuste a larguras da tabela para funcionar de forma eficiente no ecrã mais pequeno que for esperado. Por exemplo, se esperar que o site seja visualizado num telefone, a largura por omissão de 767 píxeis será provavelmente muito grande para ser apresentada na totalidade num ecrã de um telefone, mesmo quando empilhada. Pretenderá definir a largura da tabela com um tamanho menor, como 300 píxeis, ou defina a largura com 100%.

Quando terminar, volte para o modo para Visualizar e selecione uma opção de visualização com uma largura de ecrã inferior a 767 píxeis para pré-visualizar os resultados. Deve estar no modo de visualização, uma vez que uma tabela não se comporta de forma responsiva no modo de edição.

Se pretender utilizar tabelas responsivas quando cria um site a partir de um tema diferente, precisará de copiar o código do design.css do StarterTheme para o ficheiro design.css do tema que está a utilizar.

1. Para copiar o código a partir de StarterTheme design.css, clique em Programador na navegação lateral do Oracle Content Management.
2. Clique em Visualizar Todos os Temas.
3. Selecione StarterTheme e clique em Abrir.
4. Clique em designs para abrir a pasta e, em seguida, clique em valor por omissão.
5. Selecione o ficheiro design.css do StarterTheme e clique em Descarregar.
6. Abra o ficheiro num editor de texto e localize a secção do ficheiro que começa com o comentário Um exemplo de CSS de como uma tabela é renderizada de forma responsiva.
7. Selecione o código até o comentário seguinte 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 os passos para descarregar o ficheiro design.css do modelo que pretende modificar, abra o modelo e cole o código copiado no ficheiro.
9. Grave as alterações e carregue o ficheiro design.css modificado como uma nova revisão para o tema que está a modificar.