..::Freemedialab::..

«Un buon posto per approfondire in piena libertà e condivisione la propria passione verso l'informatica.»

Strumenti Utente

Strumenti Sito

Traccia: • griglia_scorrevole

Barra laterale

Categorie principali

Repository

programmazione:html:griglia_scorrevole

Indice

Table html con intestazioni delle colonne fisse

Autore: Fabio Di Matteo
Ultima revisione: 05/05/2016 - 16:52

Di seguito una table in puro html e css con intestazioni delle colonne fisse e corpo dati scorrevole.

L'idea alla base del codice puo' essere riassunta dal seguente grafico:

Il codice

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
<head>
	<title>Test grid html</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta name="generator" content="Geany 1.24.1" />
<style>
		.pobGrid{
				border: 1px Solid #BFBFBF;
				width: 935px;
				background-color: #BFBFBF ; /* Colore di sfondo griglia*/
			}
	 .column{
			background-color: #BFBFBF; /* Colore di sfondo intestazioni colonne*/
			font-weight: bold;
 
		 }
	.scrolling {
			height: 150px !important; /*Altezza griglia*/
			overflow:auto;
		}
		.body{
				font-size: 11px; /*Dimezione caratteri del corpo della griglia*/
                                word-break:break-all ;
			}
 
		/*Colorazione righe corpo griglia*/
		.body tr:nth-child(even) {background: #E1EEF2}
		.body tr:nth-child(odd) {background: #FFF}	
 
</style>
 
</head>
 
<body>
	<h1>Test grid html</h1>
	<p>Prove riguardanti una griglia in html</p>
 
	<div class="pobGrid">
	<table class="column">
	<tr>
		<td style="width: 200px">Codice</td>
		<td style="width: 200px">Nome</td>
		<td style="width: 200px">Cognome</td>
		<td style="width: 100px">Telefono</td>
		<td style="width: 200px">E-Mail</td>
	</tr>
	</table>
 
	<div class="scrolling">
	<table class="body">
	<tr><td style="width: 200px">0001</td><td style="width: 200px">Fabio</td><td style="width: 200px">Di Matteo</td><td style="width: 100px">0763 7382</td> <td style="width: 200px">mia@mail.com</td> </tr>
	<tr><td style="width: 200px">0001</td><td style="width: 200px">Fabio</td><td style="width: 200px">Di Matteo</td><td style="width: 100px">0763 7382</td> <td style="width: 200px">mia@mail.com</td> </tr>
	<tr><td style="width: 200px">0001</td><td style="width: 200px">Fabio</td><td style="width: 200px">Di Matteo</td><td style="width: 100px">0763 7382</td> <td style="width: 200px">mia@mail.com</td> </tr>
	<tr><td style="width: 200px">0001</td><td style="width: 200px">Fabio</td><td style="width: 200px">Di Matteo</td><td style="width: 100px">0763 7382</td> <td style="width: 200px">mia@mail.com</td> </tr>
	<tr><td style="width: 200px">0001</td><td style="width: 200px">Fabio</td><td style="width: 200px">Di Matteo</td><td style="width: 100px">0763 7382</td> <td style="width: 200px">mia@mail.com</td> </tr>
	<tr><td style="width: 200px">0001</td><td style="width: 200px">Fabio</td><td style="width: 200px">Di Matteo</td><td style="width: 100px">0763 7382</td> <td style="width: 200px">mia@mail.com</td> </tr>
	<tr><td style="width: 200px">0001</td><td style="width: 200px">Fabio</td><td style="width: 200px">Di Matteo</td><td style="width: 100px">0763 7382</td> <td style="width: 200px">mia@mail.com</td> </tr>
	<tr><td style="width: 200px">0001</td><td style="width: 200px">Fabio</td><td style="width: 200px">Di Matteo</td><td style="width: 100px">0763 7382</td> <td style="width: 200px">mia@mail.com</td> </tr>
	<tr><td style="width: 200px">0001</td><td style="width: 200px">Fabio</td><td style="width: 200px">Di Matteo</td><td style="width: 100px">0763 7382</td> <td style="width: 200px">mia@mail.com</td> </tr>
	<tr><td style="width: 200px">0001</td><td style="width: 200px">Fabio</td><td style="width: 200px">Di Matteo</td><td style="width: 100px">0763 7382</td> <td style="width: 200px">mia@mail.com</td> </tr>
	<tr><td style="width: 200px">0001</td><td style="width: 200px">Fabio</td><td style="width: 200px">Di Matteo</td><td style="width: 100px">0763 7382</td> <td style="width: 200px">mia@mail.com</td> </tr>
	<tr><td style="width: 200px">0001</td><td style="width: 200px">Fabio kjhaskljasdhasdkljhasdjlad aldhjsdhj akjsdhas aksdjhakdals</td><td style="width: 200px">Di Matteo</td><td style="width: 100px">0763 7382</td> <td style="width: 200px">mia@mail.com</td> </tr>
	<tr><td style="width: 200px">0001</td><td style="width: 200px">Fabio</td><td style="width: 200px">Di Matteo</td><td style="width: 100px">0763 7382</td> <td style="width: 200px">mia@mail.com</td> </tr>
	<tr><td style="width: 200px">0001</td><td style="width: 200px">Fabio</td><td style="width: 200px">Di Matteo</td><td style="width: 100px">0763 7382</td> <td style="width: 200px">mia@mail.com</td> </tr>
	<tr><td style="width: 200px">0001</td><td style="width: 200px">Fabio</td><td style="width: 200px">Di Matteo</td><td style="width: 100px">0763 7382</td> <td style="width: 200px">mia@mail.com</td> </tr>
 
	</table>
	</div>	
	</div>
 
 
 
 
 
	</table>
 
 
</body>
 
</html>

Versione che fa uso di jquery

Ecco una versione che fa uso di jquery per la formattazione della dimensione delle colonne di .tbody . 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
<head>
	<title>Test grid html</title>
	<script src="http://code.jquery.com/jquery-2.2.3.min.js"></script>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta name="generator" content="Geany 1.24.1" />
<style>
		.pobGrid{
				border: 1px Solid #BFBFBF;
				width: 935px;
				background-color: #BFBFBF ; /* Colore di sfondo griglia*/
			}
	 .column{
			background-color: #BFBFBF; /* Colore di sfondo intestazioni colonne*/
			font-weight: bold;
 
		 }
	.scrolling {
			height: 150px !important; /*Altezza griglia*/
			overflow:auto;
		}
		.tbody{
				font-size: 11px; /*Dimezione caratteri del corpo della griglia*/
			}
 
		/*Colorazione righe corpo griglia*/
		.tbody tr:nth-child(even) {background: #E1EEF2}
		.tbody tr:nth-child(odd) {background: #FFF}	
 
 
</style>
<script>
	$(document).ready(function(){
		$(".tbody tr td:nth-child(1)").css("width","200px");
		$(".tbody tr td:nth-child(2)").css("width","200px");
		$(".tbody tr td:nth-child(3)").css("width","200px");
		$(".tbody tr td:nth-child(4)").css("width","100px");
		$(".tbody tr td:nth-child(5)").css("width","200px");
 
		});
</script>
</head>
 
<body>
 
	<div class="pobGrid">
	<table class="column">
      <TH COLSPAN="2"><H3>TABLE TITLE</H3></TH>
	<tr>
		<td style="width: 200px">Codice</td>
		<td style="width: 200px">Nome</td>
		<td style="width: 200px">Cognome</td>
		<td style="width: 100px">Telefono</td>
		<td style="width: 200px">E-Mail</td>
	</tr>
	</table>
 
	<div class="scrolling">
	<table class="tbody">
	<tr><td >0001</td><td >Fabio</td><td >Di Matteo</td><td >0763 7382</td> <td >mia@mail.com</td> </tr>
	<tr><td >0001</td><td >Fabio</td><td >Di Matteo</td><td >0763 7382</td> <td >mia@mail.com</td> </tr>
	<tr><td >0001</td><td >Fabio</td><td >Di Matteo</td><td >0763 7382</td> <td >mia@mail.com</td> </tr>
	<tr><td >0001</td><td >Fabio</td><td >Di Matteo</td><td >0763 7382</td> <td >mia@mail.com</td> </tr>
	<tr><td >0001</td><td >Fabio</td><td >Di Matteo</td><td >0763 7382</td> <td >mia@mail.com</td> </tr>
	<tr><td >0001</td><td >Fabio</td><td >Di Matteo</td><td >0763 7382</td> <td >mia@mail.com</td> </tr>
	<tr><td >0001</td><td >Fabio</td><td >Di Matteo</td><td >0763 7382</td> <td >mia@mail.com</td> </tr>
	<tr><td >0001</td><td >Fabio</td><td >Di Matteo</td><td >0763 7382</td> <td >mia@mail.com</td> </tr>
	<tr><td >0001</td><td >Fabio</td><td >Di Matteo</td><td >0763 7382</td> <td >mia@mail.com</td> </tr>
	<tr><td >0001</td><td >Fabio</td><td >Di Matteo</td><td >0763 7382</td> <td >mia@mail.com</td> </tr>
	<tr><td >0001</td><td >Fabio</td><td >Di Matteo</td><td >0763 7382</td> <td >mia@mail.com</td> </tr>
	<tr><td >0001</td><td >Fabio kjhaskljasdhasdkljhasdjlad aldhjsdhj akjsdhas aksdjhakdals</td><td >Di Matteo</td><td >0763 7382</td> <td >mia@mail.com</td> </tr>
	<tr><td >0001</td><td >Fabio</td><td >Di Matteo</td><td >0763 7382</td> <td >mia@mail.com</td> </tr>
	<tr><td >0001</td><td >Fabio</td><td >Di Matteo</td><td >0763 7382</td> <td >mia@mail.com</td> </tr>
	<tr><td >0001</td><td >Fabio</td><td >Di Matteo</td><td >0763 7382</td> <td >mia@mail.com</td> </tr>
 
	</table>
	</div>	
	</div>
 
 
 
 
 
 
 
 
</body>
 
</html>
programmazione/html/griglia_scorrevole.txt · Ultima modifica: 18/04/2018 - 15:49 (modifica esterna)

Strumenti Pagina

Ad eccezione da dove è diversamente indicato, il contenuto di questo wiki è soggetto alla seguente licenza: CC Attribution-Share Alike 4.0 International

Il nostro wiki installa solamente cookie tecnici necessari al funzionamento della piattaforma "Dokuwiki". Niente analitics, statistiche, tracciamenti o altro.

CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki