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>

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

Strumenti discussione

Ricerca discussione

Visualizza

Visualizzazione discussione

Suddivisione in colonne con riga nascosta (CSS BOOTSTRAP)

Permessi di invio