Início > CSS, Tutoriais, WEB Design > Design Responsivo – Tabelas – Tutoriais e Exemplos

Design Responsivo – Tabelas – Tutoriais e Exemplos

Identifique abaixo qual das 2 tabelas adaptadas para o IPhone está errada:

Acertou quem respondeu: AS DUAS.

Sim , nenhuma delas serve para uma tabela adaptada ao IPhone.

A da esquerda está com as fontes visiveis, mas de difícil compreensão, afinal o conteúdo ultrapassou a largura determinada.

A da direita só com uma lupa. Ela está adaptada na largura, mas de que adianta? Não dá pra enxergar nada.

Pois o resultado de uma tabela aplicada ao design responsivo seria este:

Lindo não é mesmo? E o melhor de tudo, é uma tabela responsiva, ou seja, usando media queries, não precisamos ficar fazendo gambiarras com o objetivo de adaptar para o monitorzão de 1920 x 1080 e para o IPhone do tiozinho.

Segue abaixo um link contendo o tutorial de como fazer esta tabela, e também vários outros exemplos de tabelas e gráficos.

http://css-tricks.com/9096-responsive-data-tables/

E fica a dica, aqui no blog temos tutoriais e bastante conteúdo sobre design responsivo.

Divirta-se e inspire-se.

Anúncios
Categorias:CSS, Tutoriais, WEB Design Tags:,
  1. março 27, 2014 às 5:06 pm

    Muito Bom!
    Mas Tem um Pequeno Defeito que eu não consegui resolver!

    Se Eu Coloco 2 Tabelas Numa Mesma Página, quando eu vou visualizar no CELULAR as 2 TABELAS aparecerá oq que estará escrito nesta parte do CSS:

    /*
    Label the data
    */
    td:nth-of-type(1):before { content: “First Name”; }
    td:nth-of-type(2):before { content: “Last Name”; }
    td:nth-of-type(3):before { content: “Job Title”; }
    td:nth-of-type(4):before { content: “Favorite Color”; }
    td:nth-of-type(5):before { content: “Wars of Trek?”; }
    td:nth-of-type(6):before { content: “Porn Name”; }
    td:nth-of-type(7):before { content: “Date of Birth”; }
    td:nth-of-type(8):before { content: “Dream Vacation City”; }
    td:nth-of-type(9):before { content: “GPA”; }
    td:nth-of-type(10):before { content: “Arbitrary Data”; }

    ou seja, uma tabela irá dar certo, a outra vai ficar com dados da primeira!

    Sabe como Solucionar Isto?

    • julho 28, 2014 às 1:01 pm

      Pois é Luis. Pelo que vi é algo que eles não “contavam com a nossa astúcia”. Eles fizeram uma plataforma para uma tabela simples e funcional, algo como que para iniciarmos os trabalhos. No seu caso, acho que a melhor solução é buscar outra ferramenta.

  1. No trackbacks yet.

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: