Tabela Responsiva
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
Curtidas 0
Melhor post
Marcus Crisostomo
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?
GOSTEI 2
Mais Respostas
Aparecida Gonçalves
18/06/2018
<!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>
<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>
GOSTEI 0