Ir ao conteúdo
  • Cadastre-se
miltonlp

Alinhar dados mostrados em tabela

Recommended Posts

Bom dia,

Me desculpem se já havia um tópico com essa dúvida, porém, eu procurei e não encontrei algo que me ajudasse.

Estou com o seguinte problema:

Tenho um site em PHP que puxa os dados do banco de dados e mostra para mim em uma tabela.

O problema é que cada dado tem um tamanho diferente, ficando assim desalinhados todos os dados.

Gostaria que de uma forma de que independente do tamanho do dado (5, 10, 20, 30 caracteres, etc) as colunas ficassem alinhadas, como em um relatório mesmo.

Segue o código PHP para colocar os dados na tabela:


echo"<fieldset>
<table>
<tr>
<td>".$linha['Codigo']."</td>
<td>".$linha['Nome']."</td>
<td>".$linha['Endereco']."</td>
<td>".$linha['Bairro']."</td>
<td>".$linha['Cidade']."</td>
<td>".$linha['Estado']."</td>
<td>".$linha['Telefone']."</td>
<td>".$linha['Email']."</td>
</tr>
</table>
</fieldset>
";

O css está da seguinte forma:


td {
float:left;
/*width:350;*/
margin-right: 30;
}

Tentei adicionar um tamanho para a coluna, mas não deu muito certo porque o campo código tem apenas 2 caracteres, enquanto o Nome pode ter 40. Ficou muito estranho o layout, por isso estou procurando outras alternativas.

Agradeço a ajuda.

Att

Compartilhar este post


Link para o post
Compartilhar em outros sites

Acredito que a melhor forma seja colocar o width de cada coluna (td) manualmente, ou seja, inline. Não vejo problemas em utilizar inline nesse caso.

Esse tipo de "funcionalidade" que você deseja é 'quase impossivel' ser nativa e tem uma boa explicação, que pode ser lida aqui: http://stackoverflow.com/questions/450903/make-css-div-width-equal-to-contents/451074#451074

PS: Porque uma table dentro de um fieldset? o.o

Compartilhar este post


Link para o post
Compartilhar em outros sites

Bem eu faria da seguinte maneira:

criaria uma classe para o ID com uma width pequena e uma classe para os outros que tem quase o mesmo tamanho..

exemplo:


table{ text-align: center;}
.id{ width: 30px;}
.dados{ width: 350px;}

na tabela:


echo"<fieldset>
<table>
<tr>
<td class='id'>".$linha['Codigo']."</td>
<td class='dados'>".$linha['Nome']."</td>
<td class='dados'>".$linha['Endereco']."</td>
<td class='dados'>".$linha['Bairro']."</td>
<td class='dados'>".$linha['Cidade']."</td>
<td class='dados'>".$linha['Estado']."</td>
<td class='dados'>".$linha['Telefone']."</td>
<td class='dados'>".$linha['Email']."</td>
</tr>
</table>
</fieldset>
";

Mog, eu até entendo o motivo por ter usado um fieldset com uma tabela dentro. geralmente usa-se o fieldset para separar os "blocos" dentro do formulário.. também dá para fazer com sections.. mas o normal que vejo é usar fieldset :)

abração

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Entendi. Farei dessa maneira então.

Queria saber se tinha uma opção diferente dessa, mas vou colocar todos como foi citado dif.

Mog.Lucas, optei por colocar uma tabela dentro de um fieldset apenas por layout porque creio que ficou um pouco mais interessante. Tinha colocado div, mas como o resultado foi o mesmo e não vou alterar mais nada coloquei com a table mesmo.

Dei uma olhada no link também.

Obrigado pelas respostas.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Milton, só por curiosidade..

o echo todo está dentro do while? se sim, recomendo que altere e deixe só as td's dentro.. por exemplo


<fieldset>
<table>
<tr>
<?php
$sql = mysql_query("sua consulta");
while($linha = mysql_fetch_object($sql){
echo"
<td class='id'>$linha->Codigo</td>
<td class='dados'>$linha->Nome</td>
<td class='dados'>$linha->Endereco</td>
<td class='dados'>$linha->Bairro</td>
<td class='dados'>$linha->Cidade</td>
<td class='dados'>$linha->Estado</td>
<td class='dados'>$linha->Telefone</td>
<td class='dados'>$linha->Email</td>";
}
</tr>
</table>
</fieldset>

ps: usei o fetch_object por retornar um objeto ao invés de um array.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá dif,

Sim, o echo todo estava dentro do while.

Vou tirar a table de dentro, realmente não há necessidade.

Mas coloquei a <tr> dentro também para poder colocar em várias linhas.

Cada linha será para um usuário diferente, portanto preciso colocar o <tr> dentro do while também.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×