Ir para conteúdo

Arquivado

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

Cristian_

[Resolvido] Tabela dentro da div

Por , em Desenvolvimento frontend

Recommended Posts

Cristian_    0

Cristian_
Postado

Pessoal, estou com um problema aqui.

 

Tenho uma div e dentro dela uma tabela <table> que vai aumentando para baixo, com um comando for, conforme a quantidade de registros no BD.

O problema é que as divs não estão aumentando conforme a tabela e esta acaba "estourando" os limites da div #main. Pesquisei bastante e ja tentei usar o table:visible, o height:auto e nada de solucionar o problema.

 

Alguém pode me ajudar?

 

 

Tenho a seguinte estrutura:

 

<html>
<body>
<div id="content" class="clear">
    <div id="main" class="clear">
        <?php
           mysql_select_db($database_DBC, $DBC);
           $resultado = mysql_query("SELECT * FROM funcionarios");
           $linhas = mysql_num_rows($resultado);
       echo"
	<form action='#'>
               <table id='tabelaFunc' class='clear' cellpadding='0' cellspacing='0'>
               <thead>
                  <tr>
                    <th class='colCheck'><input name='checkall' onclick='checkUncheckAll(this);' type='checkbox'></th>
                    <th class='colName'><a href='?ordem=AaZ&maximo=10'>Nome</a></th>
                    <th class='colCount'>Ramal</th>
                    <th class='colCount'>E-mail</th>
                    <th class='colStatus'>Status</th>
                    <th class='colActions center'>Ação</th>
                  </tr>
               </thead><tbody>";
                for ($i=0;$i<$linhas;$i++)
                {
                    $reg = mysql_fetch_row($resultado);
                    echo"
		    <tr class='odd'>
                           <td class='colCheck'> <input id='check_sel$i' name='linhas[$i]' value='$reg[0]' type='checkbox'></td>
                           <td class='colName left'><a href='viewFuncionario.php?codigo=$reg[0]'>$reg[1]</a></td>
                           <td class='colCount'>$reg[3]</td>
                           <td class='colCount'><a href='mailto:$reg[4]?subject=Recado da Portaria'>Enviar</a></td>
                           <td class='colStatus'>";
                           if($reg[5]==0){
                               echo"<img src='/projetos/images/icostatusgreen.png' alt='Ativo'>";
                           } else{
                           echo"<img src='/projetos/images/icostatusgray.png' alt='Inativo'>";
                           }
                           echo"</td>";
                           echo"<td class='colActions'><a class='actionEdit' href='editFuncionario.php?codigo=$reg[0]'>Editar</a>
                           <a class='actionDelete' href='excFuncionario.php?codigo=$reg[0]' onclick='return alerta('Deseja excluir este Funcionário?');'>Excluir</a></td>
                       </tr>";
			 }
			 echo"</tbody></table></form>";
        ?>
    </div>
</div>
</body>
</html>

 

#content {
   background:#33F;
   width: 940px;
   margin: 32px 0;
   height: auto;
}

#main {
   width: 700px;
   margin-top: 10px;
   background: #F6C;
   height: auto;
}

#main table {
   width: 700px;
   border-bottom: 1px solid #878787;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:1em;
color: #2B5C78;
text-decoration: none;
border-collapse: collapse;
   border-spacing: 0;
height:auto;

}

#main table a:hover { text-decoration: underline; }
td, tr, th {
   vertical-align: middle;
   height: 30px;
   line-height: 30px;
   text-align: center;
text-decoration: none;
}
td, th { padding: 0 10px; }
th {
   border-right: 1px solid #000;
   border-left: 1px solid #575757;
text-decoration: none;
}
thead tr, .thead th {
   background: transparent url("/projetos/images/bgtable.gif") repeat-x 0 0;
   color: #fff;
text-decoration: none;
}
#main tr:hover { background-color: #dfdfdf; }
#main tr.even { background-color: #EEE; }
tr.odd { background-color: #fff; }
th.sortable:hover { background: transparent url("/projetos/images/bgtable.gif") repeat-x 0 -30px; }
th.sortable a:hover { text-decoration: underline; }
thead th.sorted {
   background: transparent url("/projetos/images/bgtable.gif") repeat-x 0 -60px;
   font-weight: bold;
}
thead a { color: #fff; }
thead th.sorted a {
   padding-right: 15px;
   background-repeat: no-repeat;
   background-position: 100% 50%;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Cristian_    0

Cristian_
Postado

Consegui resolver no chrome e firefox acrescentando a combinação em negrito no CSS:

 

#content {
   background:#33F;
   width: 940px;
   margin: 32px 0;
[b] height: auto;[/b]
[b] display: table;[/b]
}

#main {
   width: 700px;
   margin-top: 10px;
   background: #F6C;
[b] height: auto;[/b]
[b] float:left;[/b]
[b] display:table;[/b]

}

#main table {
   width: 700px;
   border-bottom: 1px solid #878787;
   font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
   font-size:1em;
   color: #2B5C78;
   text-decoration: none;
   border-collapse: collapse;
   border-spacing: 0;
[b] height:auto;[/b]
[b] float:left;[/b]
}

#main table a:hover { text-decoration: underline; }
td, tr, th {
   vertical-align: middle;
   height: 30px;
   line-height: 30px;
   text-align: center;
   text-decoration: none;
}
td, th { padding: 0 10px; }
th {
   border-right: 1px solid #000;
   border-left: 1px solid #575757;
   text-decoration: none;
}
thead tr, .thead th {
   background: transparent url("/projetos/images/bgtable.gif") repeat-x 0 0;
   color: #fff;
   text-decoration: none;
}
#main tr:hover { background-color: #dfdfdf; }
#main tr.even { background-color: #EEE; }
tr.odd { background-color: #fff; }
th.sortable:hover { background: transparent url("/projetos/images/bgtable.gif") repeat-x 0 -30px; }
th.sortable a:hover { text-decoration: underline; }
thead th.sorted {
   background: transparent url("/projetos/images/bgtable.gif") repeat-x 0 -60px;
   font-weight: bold;
}
thead a { color: #fff; }
thead th.sorted a {
   padding-right: 15px;
   background-repeat: no-repeat;
   background-position: 100% 50%;
}

 

Porém no IE não funciona!! A tabela continua estourando a div!

 

Alguem sabe como contornar isso no IE?

 

Valeu!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Cristian_    0

Cristian_
Postado

Olá Henrique,

 

Cara, o problema no IE era o cache.... ja estava cansado e não me liguei nisso. Hoje de manhã quando liguei a máquina funcionou certinho.

 

A solução foi mesmo alterar o css conforme postei acima. Problema resolvido!

 

De qualquer forma obrigado!

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