Como fazer a tabela responsiva - CSS
Este artigo demonstrará como podemos fazer uma tabela responsiva através do CSS.
Como fazer/criar uma tabela responsiva?
Criar uma tabela responsiva em HTML requer o uso do “Overflow-x"Propriedade na"”Elemento em que o“ Sintaxe Aqui, a propriedade "Overflow-X" adiciona a barra de rolagem para tornar a mesa responsiva. Pré -requisito: Crie uma tabela Tabela responsiva No trecho de código HTML acima: No elemento de estilo CSS, é necessário definir o “Overflow-x”Propriedade para tornar a tabela responsiva. Você também pode adicionar outras propriedades para tornar a tabela mais apresentável: No elemento de estilo CSS acima: O código acima fará uma tabela ampla na saída e o seguinte será a tela: Se o tamanho da tela for minimizado de tal maneira que transborda de fronteiras da tela, haverá uma barra de rolagem horizontal exibida na parte inferior devido ao uso de “Overflow-x" propriedade: Isso conclui como fazer tabelas responsivas em html. Conclusão As tabelas responsivas no HTML são criadas adicionando o CSS “Overflow-x”Propriedade para o elemento div no qual a tabela é criada. Esta propriedade simplesmente cria uma barra de rolagem horizontal no final da mesa que torna a mesa rolável horizontalmente. Este post demonstrou um método útil para tornar uma tabela simples responsiva. " é criado.
A sintaxe para adicionar o “Overflow-x”Propriedade para tornar a tabela responsiva é a seguinte:
Vamos criar uma tabela que seja expandida horizontalmente de tal maneira que transborda a largura da tela, adicionando múltiplos “" e " ”Elementos: Nome Padrão Pontuação Pontuação Pontuação Pontuação Pontuação Pontuação Pontuação Pontuação Pontuação Pontuação Pontuação Pontuação Pontuação Smith 8º 50 50 50 50 50 50 50 50 50 50 50 50 50 Jack 9º 70 70 70 70 70 70 70 70 70 70 70 70 70 John 10º 55 55 55 55 55 55 55 55 55 55 55 55 55
”O elemento é adicionado para criar uma tabela na página da web.
”Elemento, quatro“
”Os elementos foram adicionados para fazer quatro fileiras da tabela. ”Os elementos foram adicionados que definem o conteúdo do cabeçalho. ”Os elementos foram adicionados para inserir o conteúdo nas linhas da tabela.
Overflow-X: Auto;
mesa
espaçamento de borda: 0;
largura: 100%;
Fronteira: 1px sólido #DDD;
th, td
Alinhamento de texto: esquerda;
preenchimento: 8px;
TR: Nth-Child (par)
Background-Color: #f2f2f2;