Tabela Responsiva

18/06/2018

0

Salve!!! Alguém sabe como posso fazer uma tabela de 2 colunas e quatro linhas ficar com 1 coluna e 8 linhas em dispositivos mobile?
Bruno Marques

Bruno Marques

Responder

Post mais votado

29/06/2018

Não costumo trabalhar com tabelas no modo responsivo. Mas acho que seria mais fácil vc criar duas tabelas diferentes (Uma para o modo desktop e uma para os dispositivos mobile) e através de Media Query do CSS vc controla a visualização da tabela de acordo com a tela do dispositivo. Que vc acha?

Marcus Crisostomo

Marcus Crisostomo
Responder

Mais Posts

09/07/2018

Aparecida Gonçalves

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Seu site </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<style>
.minhadiv{
float: left;
width:100%;
max-width:1800px;
}
.aaa{
background-color:red;

}
.bbb{
background-color:blue;
}
</style>
<body>
<div class="container">
<div class="minhadiv">
<div class="aaa col-xs-12 col-md-6">
<p>1. Conteudo A </p>
<p>2. Conteudo B </p>
<p>3. Conteudo C </p>
<p>4. Conteudo D </p>
</div>
<div class="bbb col-xs-12 col-md-6">
<p>5. Conteudo E </p>
<p>6. Conteudo F </p>
<p>7. Conteudo G </p>
<p>8. Conteudo H </p>
</div>
</div>
</body>
</html>
Responder

Que tal ter acesso a um e-book gratuito que vai te ajudar muito nesse momento decisivo?

Ver ebook

Recomendado pra quem ainda não iniciou o estudos.

Eu quero
Ver ebook

Recomendado para quem está passando por dificuldades nessa etapa inicial

Eu quero

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar