Suddivisione in colonne con riga nascosta (CSS BOOTSTRAP)

**chinoknot** · 03-02-2016, 17:51

Ciao a tutti,

sto cercando di mostrare i risultati di una query su una tabella html. I campi però sono circa 30, quindi il mio intento è metterne un pò sopra e poi cliccando sulla riga, si apre al di sotto il resto delle colonne. Sono riuscito a farlo. Però siccome sono appunto 30 campi, vorrei suddividere il risultato di questa riga nascosta in 3 colonne, appunto per non creare una lista lunghissima.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Menu</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-table-expandable.css">
<link rel="stylesheet" type="text/css" href="css/datepicker.css">
<link rel="stylesheet" type="text/css" href="css/Datatable/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="css/Datatable/dataTables.tableTools.css">
<link rel="stylesheet" type="text/css" href="css/Timepicker/jquery.timepicker.css">
<link rel="stylesheet" type="text/css" href="css/Datepicker/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="css/style_new.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min2.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-multiselect.css">
<link rel="stylesheet" type="text/css" href="css/tablered.css">

<script language="javascript" type="text/javascript" src="js/Datepicker/jquery-1.10.2.js"></script>
<script language="javascript" type="text/javascript" src="js/Datepicker/jquery-ui.js"></script>
<script language="javascript" type="text/javascript" src="js/Datepicker/ui.datepicker-it.js"></script>
<script src="css/bootstrap-table-expandable.js"></script>

<script language="javascript" type="text/javascript" src="js/Datatable/jquery-1.11.1.min.js"></script>
<script language="javascript" type="text/javascript" src="js/Datatable/jquery.dataTables.min.js"></script>
<script language="javascript" type="text/javascript" src="js/Datatable/dataTables.tableTools.js"></script>
<script language="javascript" type="text/javascript" src="js/Timepicker/jquery.timepicker.js"></script>
<script language="javascript" type="text/javascript" src="js/bootstrap.min.js"></script>
<script language="javascript" type="text/javascript" src="js/bootstrap-multiselect.js"></script>



<link href="css/jquery-ui.css" rel="stylesheet" type="text/css" />

</head>

<?php
include('configDB.php');

?>

<table id="demoajax" class="table table-striped" style="border-collapse:collapse;">
<thead>
<tr>
<th class="header vert-align text-center">ID PRATICA</th>
<th class="header vert-align text-center">Nome</th>
<th class="header vert-align text-center">Cognome</th>
<th class="header vert-align text-center" >Indirizzo</th>
<th class="header vert-align text-center">Cap</th>
<th class="header vert-align text-center">Città</th>
<th class="header vert-align text-center">Provincia</th>
<th class="header vert-align text-center">Telefono1</th>
<th class="header vert-align text-center">Telefono2</th>
<th class="header vert-align text-center">Telefono3</th>


</tr>
</thead>

<tbody>

<?php $data = array();

$result = mssql_query("SELECT * FROM csv2 Order by ID_PRATICA");

while ($row = mssql_fetch_array($result)) { $data[] = $row;

$id = $row['id_pratica'];
//echo $id;
?>

<tr data-toggle="collapse" data-target="#mail<? echo $id ?>" class="accordion-toggle">
<td class="vert-align text-center"><?php echo $row["ID_PRATICA"]?></td>
<td class="vert-align text-center"><?php echo $row["NOME"]?></td>
<td class="vert-align text-center"><?php echo $row["COGNOME"]?></td>



<td class="vert-align text-center"><?php echo $row["VIA_INSTALLAZIONE"]?></td>
<td class="vert-align text-center"><?php echo $row["CAP_INSTALLAZIONE"]?></td>
<td class="vert-align text-center"><?php echo $row["CITTA_INSTALLAZIONE"]?></td>
<td class="vert-align text-center"><?php echo $row["PROVINCIA_INSTALLAZIONE"]?></td>

<td class="vert-align text-center"><?php echo $row["FIXED_NUMBER"]?></td>
<td class="vert-align text-center"><?php echo $row["SECOND_RECALL_NUM"]?></td>
<td class="vert-align text-center"><?php echo $row["CONTACT_NUMBER"]?></td>



















<td><a href="http://www.google.it/" class="btn btn-primary btn" >Edit</a></td>

</tr>

<tr >
<td colspan="9" class="hiddenRow"><div class="accordian-body collapse" style="margin-left

x;" id="mail<? echo $id ?>">
<b>Codice Fiscale:</b> <?php echo $row["CODICE_FISCALE"] ?> <br />
<b>Partita Iva:</b> <?php echo $row["PARTITA_IVA"] ?> <br />
<b>CUS_CUSTCODE:</b><?php echo $row["CUS_CUSTCODE"] ?> <br />
<b>DATA_IMPORT:</b> <?php echo $row["DATA_IMPORT"] ?> <br />
<b>MIN_DELIVERY_DATE:</b> <?php echo $row["MIN_DELIVERY_DATE"] ?><br />
<b>SERIAL_NUMBER:</b> <?php echo $row["SERIAL_NUMBER"] ?><br />
<b>SLOT:</b> <?php echo $row["SLOT"] ?><br />

<b>DATA_INTERVENTO:</b> <?php echo $row["DATA_INTERVENTO"] ?><br />
<b>TIPO_INSTALLAZIONE:</b> <?php echo $row["TIPO_INSTALLAZIONE"] ?><br />
<b>STATO_INTERVENTO:</b> <?php echo $row["STATO_INTERVENTO"] ?><br />
<b>TIPOLOGIA_RICHIESTA:</b> <?php echo $row["TIPOLOGIA_RICHIESTA"] ?><br />
<b>ETA:</b> <?php echo $row["ETA"] ?><br />
<b>NOTE_OPERATORE:</b> <?php echo $row["NOTE_OPERATORE"] ?><br />
<b>NOTE_INSTALLATORE:</b> <?php echo $row["NOTE_INSTALLATORE"] ?><br />

<b>CANALE_PROVENIENZA:</b> <?php echo $row["CANALE_PROVENIENZA"] ?><br />
<b>SDA_LETTERAVETTURA:</b> <?php echo $row["SDA_LETTERAVETTURA"] ?><br />
<b>SDA_CODICE_FILIALE:</b> <?php echo $row["SDA_CODICE_FILIALE"] ?><br />
<b>SDA_INDIRIZZO:</b> <?php echo $row["SDA_INDIRIZZO"] ?><br />
<b>SDA_DATA_ARRIVO:</b> <?php echo $row["SDA_DATA_ARRIVO"] ?><br />
<b>SDA_DATA_ARRIVO:</b> <?php echo $row["SDA_DATA_ARRIVO"] ?></div>

</td>

</tr>

<?php } ?>

</tbody>
</table>

<script type="text/javascript" src="modifica.js"></script>

</body>
</html>

**ResianTaxidrive** · 03-02-2016, 18:46

Così come hai postato non si capisce granchè. Oltre a non aver postato il codice dentro gli opportuni tag, hai messo un sacco di cose che non c'entrano. Non inserire php, non mettere include che non sono a noi necessari. Posta solo html e regole css se ne hai.

Cmq non ho capito bene come vuoi suddividere i tuoi contenuti. Forse dovresti avere 3 td per riga e inserire in ciascun td un certo numero di campi pescati dal db?

**chinoknot** · 04-02-2016, 11:17

Hai ragione, solo che mettendolo fra tag veniva uno schifo. Tolgo le parti php così come mi hai richiesto.

codice HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Menu</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-table-expandable.css">
<link rel="stylesheet" type="text/css" href="css/datepicker.css">
<link rel="stylesheet" type="text/css" href="css/Datatable/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="css/Datatable/dataTables.tableTools.css">
<link rel="stylesheet" type="text/css" href="css/Timepicker/jquery.timepicker.css">
<link rel="stylesheet" type="text/css" href="css/Datepicker/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="css/style_new.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min2.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-multiselect.css">
<link rel="stylesheet" type="text/css" href="css/tablered.css">


<script language="javascript" type="text/javascript" src="js/Datepicker/jquery-1.10.2.js"></script>
<script language="javascript" type="text/javascript" src="js/Datepicker/jquery-ui.js"></script>
<script language="javascript" type="text/javascript" src="js/Datepicker/ui.datepicker-it.js"></script>
<script src="css/bootstrap-table-expandable.js"></script>



<script language="javascript" type="text/javascript" src="js/Datatable/jquery-1.11.1.min.js"></script>
<script language="javascript" type="text/javascript" src="js/Datatable/jquery.dataTables.min.js"></script>
<script language="javascript" type="text/javascript" src="js/Datatable/dataTables.tableTools.js"></script>
<script language="javascript" type="text/javascript" src="js/Timepicker/jquery.timepicker.js"></script>
<script language="javascript" type="text/javascript" src="js/bootstrap.min.js"></script>
<script language="javascript" type="text/javascript" src="js/bootstrap-multiselect.js"></script>




<!--<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed|Open+Sans+Condensed:30 0' rel='stylesheet' type='text/css'>-->

<link href="css/jquery-ui.css" rel="stylesheet" type="text/css" />

</head> 




<table id="demoajax" class="table table-striped" style="border-collapse:collapse;">
<thead>
<tr>
<th class="header vert-align text-center">ID PRATICA</th> 
<th class="header vert-align text-center">Nome</th>
<th class="header vert-align text-center">Cognome</th>
<th class="header vert-align text-center" >Indirizzo</th>
<th class="header vert-align text-center">Cap</th> 
<th class="header vert-align text-center">Città</th>
<th class="header vert-align text-center">Provincia</th>
<th class="header vert-align text-center">Telefono1</th>
<th class="header vert-align text-center">Telefono2</th> 
<th class="header vert-align text-center">Telefono3</th> 
<!--<th class="header vert-align text-center">campo</th>
<th class="header vert-align text-center">campo</th>
<th class="header vert-align text-center">campo</th>
<th class="header vert-align text-center">campo</th>
<th class="header vert-align text-center">campo</th>
<th class="header vert-align text-center">campo</th>
<th class="header vert-align text-center">campo</th>
<th class="header vert-align text-center">campo</th>
<th class="header vert-align text-center">campo</th>
<th class="header vert-align text-center">campo</th>
<th class="header vert-align text-center">campo</th>
<th class="header vert-align text-center">campo</th>
<th class="header vert-align text-center">campo</th>
<th class="header vert-align text-center">campo</th>
<th class="header vert-align text-center">campo</th>
<th class="header vert-align text-center">campo</th>
<th class="header vert-align text-center">campo</th>
<th class="header vert-align text-center">campo</th>
<th class="header vert-align text-center">campo</th>
<th class="header vert-align text-center">campo</th>
<th class="header vert-align text-center">campo</th> -->

</tr>
</thead>

<tbody>



<tr data-toggle="collapse" data-target="#mail" class="accordion-toggle"> 
<td class="vert-align text-center"></td> 
<td class="vert-align text-center"></td> 
<td class="vert-align text-center"></td> 
<!--<td class="vert-align text-center"></td> -->
<!--<td class="vert-align text-center"></td> --> 
<!--<td class="vert-align text-center"></td> --> 
<td class="vert-align text-center"></td> 
<td class="vert-align text-center"></td> 
<td class="vert-align text-center"></td> 
<td class="vert-align text-center"></td> 
<!--<td class="vert-align text-center"></td> -->
<td class="vert-align text-center"></td> 
<td class="vert-align text-center"></td> 
<td class="vert-align text-center"></td> 
<!--<td class="vert-align text-center"></td> -->
<!--<td class="vert-align text-center"></td> -->
<!--<td class="vert-align text-center"></td> -->
<!--<td class="vert-align text-center"></td> -->
<!--<td class="vert-align text-center"></td> -->
<!--<td class="vert-align text-center"></td> -->
<!--<td class="vert-align text-center"></td> -->
<!--<td class="vert-align text-center"></td> -->
<!--<td class="vert-align text-center"></td> -->
<!--<td class="vert-align text-center"></td> -->
<!--<td class="vert-align text-center"></td> -->
<!--<td class="vert-align text-center"></td> -->
<!--<td class="vert-align text-center"></td> -->
<!--<td class="vert-align text-center"></td> -->
<!--<td class="vert-align text-center"></td> -->
<!--<td class="vert-align text-center"></td> -->
<!--<td class="vert-align text-center"></td> -->
<!--<td class="vert-align text-center"></td> -->



<td><a href="http://www.google.it/" class="btn btn-primary btn" >Edit</a></td>

</tr> 


<tr >
<td colspan="9" class="hiddenRow"><div class="accordian-body collapse" style="margin-leftx;" id="mail">
<b>Codice Fiscale:</b>  <br /> 
<b>Partita Iva:</b>  <br /> 
<b>CUS_CUSTCODE:</b> <br /> 
<b>DATA_IMPORT:</b>  <br />
<b>MIN_DELIVERY_DATE:</b> <br /> 
<b>SERIAL_NUMBER:</b> <br /> 
<b>SLOT:</b> <br /> 

<b>DATA_INTERVENTO:</b> <br /> 
<b>TIPO_INSTALLAZIONE:</b> <br /> 
<b>STATO_INTERVENTO:</b> <br /> 
<b>TIPOLOGIA_RICHIESTA:</b> <br /> 
<b>ETA:</b> <br /> 
<b>NOTE_OPERATORE:</b><br /> 
<b>NOTE_INSTALLATORE:</b> <br /> 

<b>CANALE_PROVENIENZA:</b> <br /> 
<b>SDA_LETTERAVETTURA:</b><br /> 
<b>SDA_CODICE_FILIALE:</b> <br /> 
<b>SDA_INDIRIZZO:</b> <br /> 
<b>SDA_DATA_ARRIVO:</b> <br /> 
<b>SDA_DATA_ARRIVO:</b> </div>




</td>

</tr> 










</tbody>
</table>


<script type="text/javascript" src="modifica.js"></script> 


</body>
</html>

Discussione: Suddivisione in colonne con riga nascosta (CSS BOOTSTRAP)

Strumenti discussione

Ricerca discussione

Visualizza

Suddivisione in colonne con riga nascosta (CSS BOOTSTRAP)

Permessi di invio