Como criar uma mesa responsiva com rolagem horizontal em Divi

Criar uma tabela responsiva pode ser um desafio, especialmente se você tiver uma tabela com muitas colunas. Uma ótima maneira de resolver esse problema é adicionar a capacidade de rolagem horizontal à tabela. Uma tabela com rolagem horizontal resolve dois problemas principais. Primeiro, permite que o designer mantenha o espaçamento necessário para o conteúdo da tabela (colunas realmente estreitas farão com que o conteúdo se junte demais). E, em segundo lugar, permite ao usuário visualizar o conteúdo da tabela de fácil leitura em dispositivos móveis.

Neste tutorial, vamos mostrar como usar o Divi para construir uma mesa totalmente personalizada com rolagem horizontal. Mostraremos como adicionar a funcionalidade de rolagem horizontal às colunas que ultrapassam o contêiner da tabela. Além disso, vamos até adicionar alguns botões de rolagem horizontal à mesa para impulsionar a experiência do usuário. Tudo isso sem plugin!

Vamos começar.

Espiada

Aqui está uma rápida olhada na mesa responsiva com rolagem horizontal que construiremos neste tutorial.

Baixe o Layout GRATUITAMENTE

Para colocar suas mãos nos designs deste tutorial, primeiro você precisa fazer o download usando o botão abaixo. Para obter acesso ao download, você precisará se inscrever em nossa lista de e-mail Divi Daily usando o formulário abaixo. Como um novo assinante, você receberá ainda mais bondade Divi e um pacote Divi Layout grátis toda segunda-feira! Se você já está na lista, basta inserir seu endereço de e-mail abaixo e clicar em download. Você não será “reinscrito” nem receberá e-mails extras.

Baixe os arquivos

Download de graça

Junte-se ao Divi Newsletter e nós lhe enviaremos por e-mail uma cópia do último pacote de layout de página de destino Divi, além de toneladas de outros recursos, dicas e truques Divi incríveis e gratuitos. Acompanhe e você será um mestre Divi em nenhum momento. Se você já está inscrito basta digitar seu endereço de e-mail abaixo e clicar em download para acessar o pacote de layout.

DOWNLOAD

Você se inscreveu com sucesso. Por favor, verifique seu endereço de e-mail para confirmar sua assinatura e tenha acesso a pacotes de layout Divi semanais gratuitos!

Para importar o layout da seção para sua biblioteca Divi, navegue até a biblioteca Divi.

Clique no botão Importar.

No pop-up de portabilidade, selecione a aba de importação e escolha o arquivo de download do seu computador.

Em seguida, clique no botão importar.

Feito isso, o layout da seção estará disponível no Divi Builder.

Vamos para o tutorial, vamos?

O que você precisa para começar

Para começar, você precisará fazer o seguinte:

1. Se ainda não o fez, instale e ative o Divi Theme.
2. Crie uma nova página no WordPress e use o Divi Builder para editar a página no front end (construtor visual).
3. Escolha a opção “Build From Scratch”.

Depois disso, você terá uma tela em branco para começar a desenhar no Divi.

Construindo uma tabela responsiva com rolagem horizontal

Parte 1: Construindo as colunas da tabela

Para este design de tabela, vamos criar nossas colunas de tabela usando linhas. Para fazer isso, usaremos a propriedade flex (CSS customizado) para alinhar as linhas horizontalmente como colunas.

Atualizar as configurações da seção

Antes de adicionar uma linha, abra as configurações de seção da seção regular padrão e adicione o seguinte CSS personalizado ao elemento principal:

display:flex;
overflow-y:scroll !important;

Isso forçará o estouro horizontal da seção a ter uma funcionalidade de rolagem e também nos dará a propriedade flex necessária para organizar nossas linhas horizontalmente em vez de verticalmente.

Adicionar linha

Agora que o CSS da seção está instalado, crie uma linha de uma coluna dentro da seção.

Configurações de linha

Abra as configurações de linha e atualize o seguinte:

• Largura da calha: 1
• Largura: 100%

Isso garantirá que as colunas da tabela não tenham nenhuma margem extra entre os módulos de texto que adicionaremos para os itens da tabela.

Em seguida, dê à linha uma borda direita da seguinte maneira:

• Largura da borda direita: 1px
• Cor da borda direita: #cccccc

Em seguida, atualize o preenchimento:

• Preenchimento: 0 px superior, 0 px inferior

Na guia avançada, dê à linha uma classe CSS personalizada da seguinte maneira:

• Classe CSS: et-scroll-table-column

Vamos precisar disso para o código personalizado mais tarde.

Criação de itens de tabela com módulos de texto

Para criar os itens da tabela dentro de cada linha (ou coluna da tabela), vamos usar módulos de texto.

Adicionar Módulo de Texto

Conteúdo de Texto

Em seguida, adicione o texto “Item de tabela” ao conteúdo do corpo do módulo de texto.

Design de Texto

Na guia de design, atualize o seguinte:

• Alinhamento de texto: centro
• Altura: 80px

• Largura da borda direita: 1px
• Cor da borda inferior: #cccccc

Esta borda corresponderá à borda direita da linha.

CSS de texto

Para garantir que o texto dentro do módulo permaneça centralizado vertical e horizontalmente, adicione o seguinte CSS ao Elemento principal na guia avançada:

display:flex;
align-items:center;
justify-content: center;

Módulo de texto duplicado para mais itens de tabela

Agora que nosso primeiro item de tabela foi criado, duplique o módulo de texto (quantas vezes forem necessárias) para criar itens de tabela adicionais dentro da linha.

Criando o Título da Coluna da Tabela

Precisamos transformar o módulo de texto superior na coluna Título da tabela. Para fazer isso, abra as configurações do módulo de texto superior, atualize o rótulo na visualização Camadas para “Título” e adicione o texto “Título” com o conteúdo do corpo.

Em seguida, atualize a cor de fundo.

• Antecedentes: # 333333

E atualize o design do texto da seguinte forma:

• Peso da fonte do texto: negrito
• Estilo da fonte do texto: TT
• Cor do texto do texto: #ffffff

Duplique a linha para mais colunas da tabela

Agora que a primeira linha está completa, podemos duplicar a linha para criar quantas colunas de tabela forem necessárias para a tabela. Para este projeto, vamos duplicar a linha oito vezes para criar um total de nove linhas.

Parte 2: Projetando a coluna da tabela fixa com títulos verticais

A linha da extrema esquerda (ou primeira linha) servirá como títulos verticais para nossa tabela. Primeiro, precisamos atualizar o plano de fundo da linha e cada um dos módulos de texto para que eles tenham o mesmo design que os títulos no topo de cada coluna. Então, vamos tornar a linha inteira fixa para que ela permaneça no lugar enquanto o usuário rola horizontalmente para ver as colunas ocultas da tabela.

Atualizar o fundo da linha

Para fazer isso, abra as configurações da primeira linha e atualize a cor de fundo:

• Cor de fundo: # 333333

Atualizar Módulos de Texto

Em seguida, abra as configurações do módulo de texto superior que contém o Título. Clique com o botão direito do mouse no grupo de opções de texto e selecione Estender estilos de texto. No pop-up Estender Estilos, escolha estender os estilos do texto para Todos os Textos desta Coluna . Em seguida, clique no botão Estender.

Em seguida, selecione todos os módulos de texto na linha (segure ctrl (ou cmd) e clique em cada um) e atualize o conteúdo do corpo com o texto “Título”.

Adicionar logotipo

Como não precisamos do título superior desta coluna, vamos adicionar um logotipo à tabela.

Abra as configurações do módulo de texto superior na primeira linha.

Em seguida, exclua o texto do corpo.

Em seguida, adicione o logotipo (certifique-se de ter cerca de 40 x 40 pixels) como imagem de plano de fundo. Certifique-se de que o tamanho da imagem de fundo esteja definido como “Tamanho real”.

Tornando a linha de títulos verticais fixa

Para tornar a linha fixa, adicione o seguinte CSS personalizado ao elemento principal:

min-width: 150px;
position: -webkit-sticky !important;
position: sticky !important;
left: 0;

(Você pode ignorar qualquer um dos erros de código que serão exibidos usando a propriedade sticky.)

Para garantir que a linha fixa permaneça visível acima das outras linhas, atualize o Índice Z:

• Índice Z: 13

Parte 3: Atualizando a seção da tabela

Agora que os elementos da tabela estão todos no lugar, podemos atualizar a seção (o contêiner da tabela) com um tamanho específico e estouro.

Abra as configurações da seção e adicione uma cor de fundo:

• Cor de fundo: #ffeaef

Em seguida, atualize o tamanho e o espaçamento da seguinte forma:

• Largura: 100%
• Largura máxima: 900px
• Margem: 10vh superior
• Preenchimento: 0 px superior, 0 px inferior

Em seguida, adicione a seguinte classe CSS:

• Classe CSS: et-scroll-table

E atualize o estouro:

• Excesso horizontal: Scroll
• Estouro vertical: oculto

(Observação: já temos “overflow: scroll” adicionado à seção como CSS personalizado para que a funcionalidade de rolagem também tenha efeito no construtor visual.)

Parte 4: Adicionando os botões de rolagem horizontal

Como a funcionalidade de rolagem horizontal é facilmente aparente na área de trabalho, vamos adicionar botões de rolagem horizontal para uma melhor experiência do usuário.

Adicionar Seção

Para fazer isso, crie uma nova seção regular.

Abra as configurações da seção e retire o preenchimento padrão:

• Preenchimento: 0 px superior, 0 px inferior

Adicionar linha

Dê à seção uma linha de uma coluna.

E atualize as configurações de linha da seguinte maneira:

• Largura da calha: 1
• Largura: 100%
• Largura máxima: 900px
• Preenchimento: 10px superior, 10px inferior, 10px direito

Crie o botão de rolagem esquerdo

Para criar o botão de rolagem esquerdo, adicione um módulo de sinopse à coluna / linha.

Retire o título padrão e o conteúdo do corpo e adicione um ícone de seta para a esquerda.

Na guia de design, atualize o seguinte:

• Cor do ícone: # 333333
• Alinhamento de imagem / ícone: centro
• Use o tamanho da fonte do ícone: SIM
• Tamanho da fonte do ícone: 40px
• Largura do conteúdo: 100%
• Largura: 50px

Em seguida, dê à sinopse uma classe CSS:

• Classe CSS: et-scroll-left

Isso é necessário para adicionar a funcionalidade de rolagem ao clicar ao anúncio / botão com nosso código posteriormente.

Crie o botão de rolagem direito

Para criar o botão de rolagem direito, duplique a sinopse e atualize o ícone com uma seta para a direita.

Em seguida, atualize a classe CSS:

• Classe CSS: et-scroll-right

Para alinhar o botão horizontalmente, abra a configuração da coluna e adicione o seguinte CSS personalizado:

display:flex;
justify-content:flex-end;

Parte 5: Adicionando o código personalizado

Para a parte final deste tutorial, precisamos adicionar o CSS necessário para definir uma largura mínima para as linhas (que são na verdade as colunas da nossa tabela) e o código JS necessário para adicionar a funcionalidade de rolagem aos botões.

Para adicionar o código, adicione um módulo de código na segunda sinopse.

Na caixa de código, cole o seguinte CSS, certificando-se de envolver o código nas tags de estilo necessárias.

.et-scroll-left:hover, .et-scroll-right:hover{
cursor:pointer;
}
.et-scroll-table-column {
min-width: 150px;
}

@media all and (max-width: 980px) {
.et-scroll-table::-webkit-scrollbar {
display: none;
}
.et-scroll-table {
-webkit-overflow-scrolling: touch; 
-ms-overflow-style: -ms-autohiding-scrollbar; 
}
}

No código CSS, cole o jQuery a seguir, certificando-se de envolver o código com as tags de script necessárias.

(function($) {
$(document).ready(function(){
var $scrollTable = $(".et-scroll-table");
var $rightButton = $(".et-scroll-right");
var $leftButton = $(".et-scroll-left");
var singleColumnWidth = $(".et-scroll-table-column").width();
var scrollByColumnNumber = (singleColumnWidth + 1) * 2;

$rightButton.click(function () {
$scrollTable.animate({scrollLeft: "+=" + scrollByColumnNumber}, 300);
});
$leftButton.click(function () {
$scrollTable.animate({scrollLeft: "-=" + scrollByColumnNumber}, 300);
});
});
})( jQuery );

Atualizando a largura da coluna

Se você deseja atualizar a largura mínima de cada uma das colunas da tabela, você pode alterar o valor da largura mínima no CSS.

Atualizando o número de colunas na rolagem

Atualmente, clicar nos botões irá rolar horizontalmente (esquerda ou direita) a uma distância igual a duas larguras de coluna. Para alterar o número de colunas na rolagem, atualize o número da extrema direita (atualmente o número 2) no valor da variável scrollByColumnNumber .

Adicionando Cores de Colunas Alternadas

No momento, a cor de fundo da seção está determinando a cor de todas as colunas (ou linhas) da tabela. Se você quiser criar cores alternadas para essas colunas, use a seleção múltipla para selecionar linhas alternadas e adicionar uma cor de fundo branca a cada uma delas.

Resultado final

Agora confira o resultado final!

Aqui está o design final da mesa na área de trabalho.

E aqui está a funcionalidade de rolagem horizontal no desktop e no celular.

Pensamentos finais

Não importa o quão longe cheguemos no mundo do web design, as tabelas sempre parecem ter o seu lugar. Eles continuam a fornecer uma solução valiosa para organizar o conteúdo de uma maneira que os usuários entendam. Esta tabela com rolagem horizontal deve ser útil para uma ampla variedade de casos de uso. E, talvez a melhor parte, você pode atualizar o conteúdo da tabela (por meio do editor embutido do Divi) e estilizar a tabela de inúmeras maneiras criativas usando o construtor visual.

Para obter mais informações sobre como criar tabelas responsivas no WordPress, confira nosso post sobre Como criar tabelas responsivas no WordPress.

Estou ansioso para ouvir de você nos comentários.

Saúde!