Para quem é este artigo
Quase todos os designers enfrentam o problema de adaptação ao renderizar tabelas em interfaces - ou seja, adaptar tabelas para dispositivos móveis. Também será justo observar a utilidade do artigo para desenvolvedores de front-end que criam essas mesmas tabelas.
Problema
O problema para o designer começa no momento em que a mesa da versão desktop da interface é adaptada para dispositivos móveis. Como sabemos, as tabelas podem ter muitas colunas, o que acarreta travamentos de tabela além da largura da tela em um dispositivo móvel.
Esse problema é generalizado e só pode ser agravado pelo conteúdo da célula, que não é quebrado linha por linha, aumentando assim a largura da coluna.
Conjunto de dados de teste
Para entender melhor a essência do problema, vamos criar uma mesa para nós mesmos e vamos adaptá-la.
Colunas:
quarto
Uma foto
Nome completo
Telefone
O email
a data
Descrição do texto
Status
Ações
O resultado será uma tabela bastante extensa com todos os tipos de colunas de que precisamos. Francamente, mesmo a lista acima levanta questões para mim - muito espaço é desperdiçado à direita.
Largura fixa e quebra de linha
Largura para o conteúdo
“ ”.
. , . — , .
— .
- , .
: , . ( )
, . . .
, . , , . .
-
- , , , , .
- - , - ( ).
, , , ( ).
Se você notar erros ou tiver algo a acrescentar - me avise, com certeza farei isso. Obrigado pela atenção!