Preencher dados com div

[rob_php 0]

Bom dia pessoal, preciso retornar dados vindos do banco de dados para a tela, mas para isso preciso utilizar divs, pois isso não gera quebra de linhas ao acessar a informação no mobile. Alguém poderia me dar uma sugestão de como utilizar o exemplo abaixo com divs ? 

 

 

<div class="panel panel-light" style="background-color: #ff7519;">
                    <div class="panel-heading"><center><h4>Lista Pedidos 24 horas</h4></center></div>
                    <table class="table table-striped table-condensed table-bordered">
                        <thead>
                            <tr>
                                <td> 
                                    <b><font color="#00008f">Nome</font></b>
                                </td>
                                <td>
                                    <b><font color="#00008f">Email</font></b>
                                </td>
                                <td>
                                    <b><font color="#00008f">Restaurante</font></b>
                                </td>
                                <td>
                                    <b><font color="#00008f">Status</font></b>
                                </td>
                                <td>
                                    <b><font color="#00008f">Horário feito</font></b>

                                </td>
                                <td>
                                    <b><font color="#00008f">Horário aceito</font></b>
                                </td>

                            </tr>
                        </thead>

[Bergs 53]

Normalmente usa-se uma barra de rolagem horizontal na tabela.

 

Mas quando for na versão mobile você troca (via media querie) a table por suas divs como se fossem listas cada coluna.

[rob_php 0]

Teria como me mostrar um exemplo desse preenchimento com divs ou me apontar algum link que demonstre isso, desde já obrigado.

[Bergs 53]

Visualize cada div como se fosse uma coluna de sua tabela daí é só popular ela, e fazer aparecer pelo CSS.

 

<div>  <center><h4>Lista Pedidos 24 horas</h4></center> </div>
<div class="coluna1">titulo <br/>  iten1 <br> iten2 .... .. ..</div>
<div class="coluna2">titulo <br/>  iten1 <br> iten2 .... .. ..</div>
<div class="coluna3">titulo <br/>  iten1 <br> iten2 .... .. ..</div>

 

[Guilherme Luiz 41]

utilize um framework para facilitar a sua vida.

O bootstrap é muito bom, fácil, leve e é mobile-first.

 

http://getbootstrap.com/getting-started/

[Bergs 53]

24 minutos atrás, Guilherme Luiz disse:

utilize um framework para facilitar a sua vida.

O bootstrap é muito bom, fácil, leve e é mobile-first.

 

http://getbootstrap.com/getting-started/

 

Pelo código dele acho que já utiliza. pelas tags as classes da tabela dele.

 

table table-striped table-condensed table-bordered

[Eziquiel 96]

Talvez algo assim pode ser a solução:

(Clique no nome para exibir as demais informações).

No local do nome coloque a informação mais importante.

 

http://codepen.io/Eziquiel/pen/ZexdWL?editors=0100

[Bergs 53]

1 hora atrás, Eziquiel disse:

Talvez algo assim pode ser a solução:

(Clique no nome para exibir as demais informações).

No local do nome coloque a informação mais importante.

 

http://codepen.io/Eziquiel/pen/ZexdWL?editors=0100

 

Muito bom.