Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Bruno Conte

Div dentro de table não funciona

Por , em Desenvolvimento frontend

Recommended Posts

Bruno Conte    4

Bruno Conte
Postado

Boa tarde pessoal, estou fazendo um codigo simples e queria separar ele em 3 colunas usando table mesmo, ja que é um codigo pequeno.

 

so que quando coloco a table as divs somem.

 

o que posso fazer para funcionar?

 

 

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<script type="text/javascript" src="/js/lib/dummy.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type="text/css">
#imagem1 {
height: 300px;
width: 300px
}
#imagem2 {
height: 300px;
width: 300px
}
input[name=cachorro][value=marrom]:checked ~ #imagem1 {
background: url(http://i.imgur.com/7p9FKTl.jpg) center center fixed;
background-size: cover
}
input[name=cachorro][value=branco]:checked ~ #imagem1 {
background: url(http://i.imgur.com/PmccreP.jpg) center center fixed;
background-size: cover
}
input[name=cachorro][value=marrom]:checked ~ #imagem2 {
background: url(http://i.imgur.com/7p9FKTl.jpg) center center fixed;
background-size: cover
}
input[name=cachorro][value=branco]:checked ~ #imagem2 {
background: url(http://i.imgur.com/PmccreP.jpg) center center fixed;
background-size: cover
}
</style>
<title></title>
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
}//]]>
</script>
</head>
<body>
Branco <input type='radio' name='cachorro' value='marrom' checked/>
/ Marrom <input type='radio' name='cachorro' value='branco'/>
<table width="100%" border="0">
<tr>
<td><div id="imagem1"></div></td>
<td><div id="imagem2"></div></td>
</tr>
</table>
</body>
</html>

 

se eu colocar assim funciona:

 

 

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<script type="text/javascript" src="/js/lib/dummy.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type="text/css">
#imagem1 {
height: 300px;
width: 300px
}
#imagem2 {
height: 300px;
width: 300px
}
input[name=cachorro][value=marrom]:checked ~ #imagem1 {
background: url(http://i.imgur.com/7p9FKTl.jpg) center center fixed;
background-size: cover
}
input[name=cachorro][value=branco]:checked ~ #imagem1 {
background: url(http://i.imgur.com/PmccreP.jpg) center center fixed;
background-size: cover
}
input[name=cachorro][value=marrom]:checked ~ #imagem2 {
background: url(http://i.imgur.com/7p9FKTl.jpg) center center fixed;
background-size: cover
}
input[name=cachorro][value=branco]:checked ~ #imagem2 {
background: url(http://i.imgur.com/PmccreP.jpg) center center fixed;
background-size: cover
}
</style>
<title></title>
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
}//]]>
</script>
</head>
<body>
Branco <input type='radio' name='cachorro' value='marrom' checked/>
/ Marrom <input type='radio' name='cachorro' value='branco'/>
<div id="imagem1"></div>
<div id="imagem2"></div>
</body>
</html>

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

L. Henrique    179

L. Henrique
Postado

Elas somem pelo motivo da sua coluna e linha não ter altura e nem largura especificados.
E qual o intuito Inserir uma div dentro de uma table?

Pra separar por colunas é bem mais prático usar o CSS pra isso. Já que são duas imagens:

.classe-da-div {
   width: 50%;
   display: inline-block;
   white-space: nowrap;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito