Problema em definir largura e disposição horizontal de tabelas com resultado de while

Aureo Almeida · Julho 14, 2019

Como iniciante em programação estou tendo problemas para estilizar uma tabela dentro de um script PHP. Possuo o seguinte script:

 <?php 
		 $sql = 'SELECT * FROM psd_produtos';
		 $stmt = $conn->query($sql);
		echo '<table>';
		 while($row = $stmt->fetch(PDO::FETCH_OBJ)){
                			echo "
				<td>
				<tr><h1>$row->prd_nome <br /></h1></tr>
				<tr><p>$row->prd_detalhe <br /></p></tr>
				<tr>$row->prd_valor <br /></tr>
				</td>
				";	
            }
			echo '</table>';
		 ?>

Ele funciona perfeitamente, buscando e produzindo um loop das informações que preciso, porém, gostaria que o resultado me retornasse em tabelas que ficasse dispostas horizontalmente lado a lado, e imaginei colocar uma classe CSS que estabelecesse a largura da tabela em 400px com um float que me permitiria alinhar o resultado em “4 colunas”. Porém, essa classe não funciona dentro do script.

Tentei echo '<table class="tabela-produto">'; e não funciona.

A mesma classe, que estabelece uma largura para a tabela, aplicada a uma tabela fora do script funciona e isso tirou minha dúvida se este tópico seria sobre CSS/HTML ou PHP.

Como posso fazer para obter meu objetivo com este script, alinhando horizontalmente o resultado do while em tabelas dispostas horizontalmente em 4 colunas?

gabrielms · Julho 14, 2019

@Aureo Almeida Bom dia,!

Cara, seu problema está no seu HTML e no CSS.

Tem um erro no HTML no elemento table, você colocou um elemento cell(<td>) antes de um elemento row(<tr>), e dentro do elemento cell(<td>), você colocou 3 elementos row(<tr>), e isso está totalmente errado.

Uma tabela simples no HTML ficaria assim:

<table>
  <tr>
    <td>Cell A</td>
    <td>Cell B</td>
  </tr>
</table>

Como você não colocou seu CSS não tem como verificar se tem alguma coisa errada no css.

Aqui tem a documentação da tabela do HTML

Vou deixa um exemplo de 3 tabelas alinhadas horizontalmente usando HTML e CSS, e colocando os elementos da tabela usando um echo do php.

<?php

$num = -1;
$resultato = [
    array("id"=>1, "name"=>"teste01", "valor"=>200),
    array("id"=>2, "name"=>"teste02", "valor"=>400),
    array("id"=>3, "name"=>"teste03", "valor"=>600),
    array("id"=>4, "name"=>"teste04", "valor"=>800),
    array("id"=>5, "name"=>"teste05", "valor"=>1000)
];

function emularDb()
{
    global $num, $resultato;

    if ($num < (count($resultato) - 1))
    {   
        $num++;
        return(true);
    }else
    {
        return(false);
    }
}

?>
<!DOCTYPE html>
<html>
    <head>
        <title>Tabela</title>
        <style>

            html, body{
                width: 100%;
                height: 100%;
                margin: 0px;
                padding: 0px;
            }

            .contaier{
                width: 100%;
                padding: 0px;
                margin: 0px;
            }

            table.table-cotanier{
                width: 400px;
                float: left;
                margin: 5px;
                border: #272727 1px solid;
            }

            table.table-cotanier > tbody:first-child > tr > th{
                background: #272727!important;
                padding: 5px 10px;
                color: #fff;
                width: 100%;
            }

            table.table-cotanier > tbody > tr > td{
                padding: 5px 10px;
                color: #000;
                width: 100%;
                border-bottom: 1px solid #ccc;
            }

        </style>
    </head>
    <body>
        <div class="container">
            <table class="table-cotanier">
                <tbody>
                    <tr>
                        <th>ID</th>
                        <th>NOME</th>
                        <th>VALOR</th>
                    </tr>
                </tbody>
                <tbody>
                <?php
                    while(emularDb())
                    {
                        echo("<tr>");
                        echo('<td>'.$resultato[$num]['id'].'</td>');
                        echo('<td>'.$resultato[$num]['name'].'</td>');
                        echo('<td>'.$resultato[$num]['valor'].'</td>');
                        echo("</tr>");
                    }
                ?>
                </tbody>
            </table>
            <table class="table-cotanier">
                <tbody>
                    <tr>
                        <th>ID</th>
                        <th>NOME</th>
                        <th>VALOR</th>
                    </tr>
                </tbody>
                <tbody>
                <?php

                    $num = -1;

                    while(emularDb())
                    {
                        echo("<tr>");
                        echo('<td>'.$resultato[$num]['id'].'</td>');
                        echo('<td>'.$resultato[$num]['name'].'</td>');
                        echo('<td>'.$resultato[$num]['valor'].'</td>');
                        echo("</tr>");
                    }
                ?>
                </tbody>
            </table>
            <table class="table-cotanier">
                <tbody>
                    <tr>
                        <th>ID</th>
                        <th>NOME</th>
                        <th>VALOR</th>
                    </tr>
                </tbody>
                <tbody>
                <?php

                    $num = -1;

                    while(emularDb())
                    {
                        echo("<tr>");
                        echo('<td>'.$resultato[$num]['id'].'</td>');
                        echo('<td>'.$resultato[$num]['name'].'</td>');
                        echo('<td>'.$resultato[$num]['valor'].'</td>');
                        echo("</tr>");
                    }
                ?>
                </tbody>
            </table>
        </div>
    </body>
</html>

Obs..: Muito web design não gosta do resultado da tabela do html quando o site é responsivo, pro isso muitos optam por usar flex-box ou css grid em um elemento div para fazer a tabela.

Aureo Almeida · Julho 16, 2019

Oi Pessoal. Quero dizer que eu consegui resolver o problema que postei aqui com o seguinte código, adicionando ao echo que insere a tabela uma div no entorno:

while($row = $stmt->fetch(PDO::FETCH_OBJ)){
		 	$imagem = $caminho . $row->prd_foto1;
			 echo"
			 	<div class='tabela-produtos'>
				<table border='0' cellspacing='5px'>
  				<tbody>
    			<tr class='tabela-produtos-td1'>
      			<td><img src='$imagem'/></td>
    			</tr>
    			<tr class='tabela-produtos-td2'>
      			<td><br/><br/><h1>$row->prd_nome</h1><br/></td>
    			</tr>
    			<tr class='tabela-produtos-td3'>
      			<td><h2>R$$valor</h2><br/></td>
    			</tr>
    			<tr class='tabela-produtos-td4'>
      			<td><p>$row->prd_detalhe</p><br/></td>
    			</tr>
    			<tr class='tabela-produtos-td5'>
      			<td>
                  <form>
                    <input name='COMPRAR' type='button' class='align-center' id='COMPRAR' value='Ver Detalhes'>
                  </form></td>
    			</tr>
 			 	</tbody>
				</table>
				</div>
				";
            	}

Entrar

Arquivado

Problema em definir largura e disposição horizontal de tabelas com resultado de while

Recommended Posts

Aureo Almeida 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

gabrielms 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Aureo Almeida 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Conteúdo Similar

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante