Tabella responsive in php

[moncicci]

Ciao a tutti,
sto creando un sito responsive (che ho quasi ultimato).
In un paio di pagine dovrò mostrare degli immobili disposti su 3 colonne. Girovagando in rete ho trovato la soluzione che fa al caso mio e l'ho riadattata. Ho inserito il nuovo script in un div con una classe che mi ridà un layout responsive.
il problema è che, usando dei "table", il layout diventa non responsive e non so come ovviare al problema.
Vi posto il codice:

<div class="riga">
 
<div class="colonna-1">
 
<?php
include 'config.php';


	$query="select * from immobili";
	$result=mysql_query($query);
 
	$cols=3;		
	echo "<table>";	
	do{
		echo "<tr>";
		for($i=1;$i<=$cols;$i++){	
									
			$row=mysql_fetch_array($result);
			if($row){
				$img = $row['image_path'];
 ?>
 <?php
 $dirname = "images/".$citta."/";
$images = $dirname.$imagesone;
 echo '<td>
            <table>
                <tr> ';
echo '<td>
                        <b> '.$row['riferimenti'].' </b><br />
                        <a href="/show.php?id=' .$id.'"><img src="images/Citta/'.$row['imagesone'].'" class="scala" height="300" width="400"/></a><br />
                        '.$row['prezzo'].'<br />
                    </td> ';
	
echo ' </td>
                    <td width="50">&nbsp;</td>	
                </tr>
           </table>
        </td>';
				
 ?>


		
<?php
			}
			else{
				echo "<td>&nbsp;</td>";	
			}
		}
	} while($row);
	echo "</table>";
 ?>


</div>


</div>

Spero che possiate aiutarmi. Grazie mille!

[fermat]

bhe più che un problema di php, sembra un problema di css!

hai provato a vedere jquery datatables?
ha anche un plugin per il responsive, che in pratica nasconde le colonne in base alla risoluzione.

o cmq, per il layout responsive usi qualche framework tipo bootstrap, o è fatto a mano?

[moncicci]

Ciao, grazie per la risposta.
Sono sempre stato abituato ad usare i cms ed ora mi sto cimendando in realizzazioni "fatte a mano".
Premettendo che tutti gli altri contenuti che ho inserito nelle pagine, dal testo alle foto, vengono riadattate perfettamente, pubblico il css:

/* Box-sizing -*/
* {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 *behavior: url('/test/grid/script/boxsizing.htc');
}


/* Display block per gli elementi HTML5 su IE */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
 display: block;
}


/* Immagini responsive */
img { 
 border:0; 
	vertical-align:middle; 
	-ms-interpolation-mode:bicubic;
}
 
img.scala { 
 max-width:100%; 
	height:auto; 
}


img.imgtext { 
 max-width:100%; 
	height:auto; 
	float: left;
	padding: 0 20px 15px 15px;
}


.table-responsive table td {width: 24%; word-break: break-all;}




/* Stili di base e tipografia */
html {
  font-size: 100%;
}


body {
 margin: 0;
 padding: 0;
font-family: ‘Times New Roman’, Times, serif;
 font-size: 16px;
 line-height: 20px;
 color:#000; 
 background-color: #fff;
 -webkit-text-size-adjust:100%;
}


p.text {
padding: 0 15px 0 15px;
text-align: justify;
}


p.foottext {
margin: 10px 10px 10px 10px;
padding: 20px 20px 20px 20px;
text-align: center;
}


a {
 color: #000;
 text-decoration: none;


}


a:hover {
 color: #fff;
 text-decoration: none;
 background:  url(../img/dark-bg1.png) repeat top;
 
}


h1, h2, h3, h4, h5, h6 { 
	font-family:"Georgia", "Times New Roman", serif; 
	color: #000;
} 


h1 { 
 font-size:42px; 
	line-height:46px; 
	margin-bottom:20px; 
}


h2 { 
 font-size:28px; 
	line-height:32px; 
	margin-bottom:12px; 
}


h3 { 
 font-size:21px; 
	line-height:25px; 
	margin-bottom:8px; 
}


/* Griglia */


.riga {
 width: 100%; 
 /* max-width: 960px; */
 max-width: none;
 min-width: 720px; 
 margin: 0 auto;
 background: url(../img/grey-light.jpg) repeat left top; 
}


[class*='colonna-'] {
 float: left; 
 min-height: 1px; 
 padding: 0 15px; 
 background: url(../img/grey-light.jpg) repeat left top;
}




.colonna-left {
margin: 10px 0 0 12px;
 width: 20%;
 height: 100%;
 background: url(../img/grey-light.jpg) repeat left top;
}


.colonna-right {
 margin: 10px 14px 10px 10px;
    float: right;
    width: 75%;
	 background: url(../img/grey-light.jpg) repeat right top;


}


.colonna-all {
float: left;
    width: 100%;
	
	text-indent: 10px;
	text-align: justify;
	/* margin: 0 15px 0 15px; */
		 background: url(../img/grey-light.jpg) repeat top;


}


.colonna-1-4 {
width: 25%;
}


.colonna-1-3 {
 width: 33.33%;
}


.colonna-1-2 {
 width: 50%;
}


.colonna-1 {
 width: 100%;
}


[class*="colonna-"] + [class*="colonna-"]:last-child {float: right;}


/* Micro-clearfix */
.riga:before,
.riga:after {
 content: " "; 
 display: table;
}


.riga:after {
 clear: both;
}


.riga {
 *zoom: 1;
}


/* Stili  per le varie sezioni */
header {
 height: 170px;
 border-bottom: 1px solid #333;
 position: relative;
 	 background: url(../img/header.jpg) repeat top;


}


header #logo {
 float: left;
 margin: 20px 0 20px 0;
}




footer {
 border-top: 1px solid #333;
 border-bottom: 1px solid #333;
	 background: url(../img/dark-bg1.png) repeat top;
	 color: #fff;


}


a.footer {
color: #fff;
}


nav {
 float: left;
 margin: 10px 0 0 0;
 padding: 20px 20px 20px 20px;
color:  #fff;
}


nav ul, nav li {
 margin: 0;
 padding: 0;
}


nav ul li {
 list-style: none;
 float: left;
 margin-right: 5px;
}


nav ul li a {
 display: block;
 padding: 5px;
}


a.attiva-nav {
 display: none;
}


@media only screen and (max-width:600px) {
.riga { 
 width: auto;
 min-width: 0; 
 margin-left: 0; 
 margin-right: 0;
}
 
[class*="colonna-"] { 
 width: auto !important; 
 float: none;  
}


[class*="colonna"] + [class*="colonna"]:last-child {float: none;}
 
[class*="colonna-"]:before, [class*="colonna-"]:after {
 content:""; 
 display:table;
}


[class*="colonna-"]:after {clear: both;}


a.attiva-nav {
 display: block;
	float: right;
	color: #2cb7ea;
	background: #4e4e4e;
	text-decoration: none;
	margin: 20px 0 0 0;
	padding: 0 10px;
	font-size: 14px;
	font-weight: bold;
	line-height: 22px;
	height: 22px;
}


nav {
 clear: both;
 position: absolute;
	top: 70px;
	width: 100%;
	z-index: 10000;
	background: #fff;
	padding: 0;
	display: none;
}


nav ul {
 margin: 0;
 padding: 0;
}
nav ul li {
 list-style: none;
 float: none;
}


nav ul li a { 
 padding: 5px;
 display: block;
 border-bottom: 1px solid #333; 
 background-color: #e0e0e0;
}
}

Grazie mille!

[fermat]

per i siti responsive generalmente uso dei framework che semplifchino un pò questo lavoro.
nello specifico per la tabelle uso dei plugin appositi.

cmq per la tua richiesta dovresti chiedere nella seziona css.
qua php non c'entra nulla.

[moncicci]

ok, grazie mille, posterò li.