Utility
Home Messaggi odierni FAQ Ricerca avanzata Lo staff del forum Regolamento Utenti Archivio
Visualizzazione dei risultati da 1 a 3 su 3
  1. 13-03-2012, 11:30 #1
    Casshern
    Casshern non è in linea
    Utente di HTML.it
    Registrato dal
    Sep 2006
    Messaggi
    30

    table header e rows fixed

    Buongiorno

    Mi servirebbe una soluzione a questo dilemma :

    ho una tabella con scroll orizzontale e verticale.

    Quando la tabella scrolla orizzontalmente la prima colonna è bloccata mentre l'header e il resto delle colonne scrollano orizzontalmente.

    Viceversa quando la tabella scrolla verticalmente l'header è bloccato mentre il resto delle righe scrollano verticalmente.

    Ho trovato veri esempi per bloccare l'header ma fare tutta questa cosa la vedo un pò ostica.

    Avete qualche soluzione ?

    Grazie
    Rispondi quotando Rispondi quotando
  2. 15-03-2012, 17:43 #2
    Casshern
    Casshern non è in linea
    Utente di HTML.it
    Registrato dal
    Sep 2006
    Messaggi
    30
    Ho risolto con jQuery che dio lo benedica...

    Ho questo problema adesso, devo dare dimensione fissa alle colonne ma non riesco ad impostarla.

    Come faccio ad allargare i titoli ????

    Grazie

    codice:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Tabella con header fisso</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.1">
<style type="text/css">
body{font:11px arial,sans-serif}
body{padding:50px}

/* stili generici */
table,td,th{border:solid #CCC;border-width: 1px 0;border-collapse: collapse}
td,th{padding: 5px 0;text-align: left;width:100px}
th{background: #DAE6F4;color: #000}
tr.odd td{background: #eee}

/* regole per l'header fisso */
div.tablewrap{position: relative;width: 420px;padding-top: 20px}
div.tablewrap-inner{width: 420px;height: 230px; overflow: auto}
div.tablewrap thead tr{position: absolute;top: -3px} 
</style>
<style type="text/css" media="print">
body{font-size: 9pt}
div.tablewrap,div.tablewrap-inner,td,th{
    width: auto;overflow: visible;height:auto}
div.tablewrap thead tr{position: static}
thead{display: table-header-group}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js" ></script>
<script type="text/javascript">
jQuery.fn.synchronizeScroll = function() {   
	var elements = this;
	if (elements.length <= 1) return;
		elements.scroll(
		function() {
			var left = jQuery(this).scrollLeft();
			var top = jQuery(this).scrollTop();
			elements.each(function() {
				if (jQuery(this).scrollLeft() != left) jQuery(this).scrollLeft(left);
				if (jQuery(this).scrollTop() != top) jQuery(this).scrollTop(top);
			});
		});
	}
	

jQuery(document).ready(function() {
  jQuery(".scrollDiv").synchronizeScroll();
});
		
	


</script>
</head>
<body>
<div style="float: left; height: 111300px; width: 55555566650px;">
<table border=1 WIDTH="55555566650">
	<tr>
		<td>
			<div style="float: right; overflow-y: hidden; overflow-x: scroll; white-space: nowrap; padding: 0px;">
				<table>
					<tr>
						<td>
							<table>
								<tr>
								   <th>Titolo Uno</th>
								</tr>
							</table>
						</td>
					</tr>
					<tr>
						<td>
							<div class="scrollDiv" style="float: left; height: 270px; width: 130px; overflow: scroll; overflow-x: visible; white-space: nowrap; padding: 0px;">
								<table>
								
									<tr>
									   <td>Uno</td>
									</tr>
									<tr>
									   <td>Uno</td>
									</tr>
									<tr>
									   <td>Uno</td>
									</tr>
									<tr>
									   <td>Uno</td>
									</tr>
									<tr>
									   <td>Uno</td>
									</tr>
									<tr>
									   <td>Uno</td>
									</tr>
									<tr>
									   <td>Uno</td>
									</tr>
									<tr>
									   <td>Uno</td>
									</tr>
									<tr>
									   <td>Uno</td>
									</tr>
									<tr>
									   <td>Uno</td>
									</tr>
									<tr>
									   <td>Uno</td>
									</tr>
									<tr>
									   <td>Uno</td>
									</tr>
									<tr>
									   <td>Uno</td>
									</tr>
									<tr>
									   <td>Uno</td>
									</tr>
									<tr>
									   <td>Uno</td>
									</tr>
									<tr>
									   <td>Uno</td>
									</tr>
									<tr>
									   <td>Uno</td>
									</tr>
									<tr>
									   <td>Uno</td>
									</tr>
									<tr>
									   <td>Uno</td>
									</tr>
									<tr>
									   <td>Uno</td>
									</tr>
									<tr>
									   <td>Uno</td>
									</tr>
									<tr>
									   <td>Uno</td>
									</tr>
								</table>
							</div>
						</td>
					</tr>
				</table>
			</div>
		</td>
		<td>
			<div style="float: left; overflow-y: hidden; width: 400px; overflow-x: scroll; white-space: nowrap; padding: 0px;">
				<table>
					<tr>
						<td>
							<div style="float: left; width: 100%; white-space: nowrap;">
								<table>
									<tr>
									   <th>Titolo Uno</th>
									   <th>Titolo Due</th>
									   <th>Titolo Tre</th>
									   <th>Titolo Quattro</th>
									   <th>Titolo Cinque</th>
									   <th>Titolo Sei</th>
									   <th>Titolo Sette</th>
									   <th>Titolo Otto</th>
									   <th>Titolo nove</th>
									   <th>Titolo dieci</th>
									   <th>Titolo undici</th>
									</tr>
								</table>
							</div>
						</td>
					</tr>
					<tr>
						<td>
							<div class="scrollDiv" style="float: left; height: 270px; overflow: hidden; overflow-x: visible; white-space: nowrap; padding: 0px;">
								<table id="t1">
									
									<tr>
									   <td>Uno</td>
									   <td>Due</td>
									   <td>Tre</td>
									   <td>Quattro</td>
									   <td>Cinque</td>
									   <td>Sei</td>
									   <td>Sette</td>
									   <td>Otto</td>
									   <td>Sei</td>
									   <td>Sette</td>
									   <td>Otto</td>
									</tr>
									<tr class="odd">
									   <td>Uno</td>
									   <td>Due</td>
									   <td>Tre</td>
									   <td>Quattro</td>
									   <td>Cinque</td>
									   <td>Sei</td>
									   <td>Sette</td>
									   <td>Otto</td>
									   <td>Sei</td>
									   <td>Sette</td>
									   <td>Otto</td>
									</tr>
									<tr>
									   <td>Uno</td>
									   <td>Due</td>
									   <td>Tre</td>
									   <td>Quattro</td>
									   <td>Cinque</td>
									   <td>Sei</td>
									   <td>Sette</td>
									   <td>Otto</td>
									   <td>Sei</td>
									   <td>Sette</td>
									   <td>Otto</td>
									</tr>
									<tr class="odd">
									   <td>Uno</td>
									   <td>Due</td>
									   <td>Tre</td>
									   <td>Quattro</td>
									   <td>Cinque</td>
									   <td>Sei</td>
									   <td>Sette</td>
									   <td>Otto</td>
									   <td>Sei</td>
									   <td>Sette</td>
									   <td>Otto</td>
									</tr>
									<tr>
									   <td>Uno</td>
									   <td>Due</td>
									   <td>Tre</td>
									   <td>Quattro</td>
									   <td>Cinque</td>
									   <td>Sei</td>
									   <td>Sette</td>
									   <td>Otto</td>
									   <td>Sei</td>
									   <td>Sette</td>
									   <td>Otto</td>
									</tr>
									<tr class="odd">
									   <td>Uno</td>
									   <td>Due</td>
									   <td>Tre</td>
									   <td>Quattro</td>
									   <td>Cinque</td>
									   <td>Sei</td>
									   <td>Sette</td>
									   <td>Otto</td>
									   <td>Sei</td>
									   <td>Sette</td>
									   <td>Otto</td>
									</tr>
									<tr>
									   <td>Uno</td>
									   <td>Due</td>
									   <td>Tre</td>
									   <td>Quattro</td>
									   <td>Cinque</td>
									   <td>Sei</td>
									   <td>Sette</td>
									   <td>Otto</td>
									   <td>Sei</td>
									   <td>Sette</td>
									   <td>Otto</td>
									</tr>
									<tr class="odd">
									   <td>Uno</td>
									   <td>Due</td>
									   <td>Tre</td>
									   <td>Quattro</td>
									   <td>Cinque</td>
									   <td>Sei</td>
									   <td>Sette</td>
									   <td>Otto</td>
									   <td>Sei</td>
									   <td>Sette</td>
									   <td>Otto</td>
									</tr>
									<tr>
									   <td>Uno</td>
									   <td>Due</td>
									   <td>Tre</td>
									   <td>Quattro</td>
									   <td>Cinque</td>
									   <td>Sei</td>
									   <td>Sette</td>
									   <td>Otto</td>
									   <td>Sei</td>
									   <td>Sette</td>
									   <td>Otto</td>
									</tr>
									<tr class="odd">
									   <td>Uno</td>
									   <td>Due</td>
									   <td>Tre</td>
									   <td>Quattro</td>
									   <td>Cinque</td>
									   <td>Sei</td>
									   <td>Sette</td>
									   <td>Otto</td>
									   <td>Sei</td>
									   <td>Sette</td>
									   <td>Otto</td>
									</tr>
									<tr>
									   <td>Uno</td>
									   <td>Due</td>
									   <td>Tre</td>
									   <td>Quattro</td>
									   <td>Cinque</td>
									   <td>Sei</td>
									   <td>Sette</td>
									   <td>Otto</td>
									   <td>Sei</td>
									   <td>Sette</td>
									   <td>Otto</td>
									</tr>
									<tr class="odd">
									   <td>Uno</td>
									   <td>Due</td>
									   <td>Tre</td>
									   <td>Quattro</td>
									   <td>Cinque</td>
									   <td>Sei</td>
									   <td>Sette</td>
									   <td>Otto</td>
									   <td>Sei</td>
									   <td>Sette</td>
									   <td>Otto</td>
									</tr>
									<tr>
									   <td>Uno</td>
									   <td>Due</td>
									   <td>Tre</td>
									   <td>Quattro</td>
									   <td>Cinque</td>
									   <td>Sei</td>
									   <td>Sette</td>
									   <td>Otto</td>
									   <td>Sei</td>
									   <td>Sette</td>
									   <td>Otto</td>
									</tr>
									<tr class="odd">
									   <td>Uno</td>
									   <td>Due</td>
									   <td>Tre</td>
									   <td>Quattro</td>
									   <td>Cinque</td>
									   <td>Sei</td>
									   <td>Sette</td>
									   <td>Otto</td>
									   <td>Sei</td>
									   <td>Sette</td>
									   <td>Otto</td>
									</tr>
									<tr>
									   <td>Uno</td>
									   <td>Due</td>
									   <td>Tre</td>
									   <td>Quattro</td>
									   <td>Cinque</td>
									   <td>Sei</td>
									   <td>Sette</td>
									   <td>Otto</td>
									   <td>Sei</td>
									   <td>Sette</td>
									   <td>Otto</td>
									</tr>
									<tr class="odd">
									   <td>Uno</td>
									   <td>Due</td>
									   <td>Tre</td>
									   <td>Quattro</td>
									   <td>Cinque</td>
									   <td>Sei</td>
									   <td>Sette</td>
									   <td>Otto</td>
									   <td>Sei</td>
									   <td>Sette</td>
									   <td>Otto</td>
									</tr>
									<tr>
									   <td>Uno</td>
									   <td>Due</td>
									   <td>Tre</td>
									   <td>Quattro</td>
									   <td>Cinque</td>
									   <td>Sei</td>
									   <td>Sette</td>
									   <td>Otto</td>
									   <td>Sei</td>
									   <td>Sette</td>
									   <td>Otto</td>
									</tr>
									<tr class="odd">
									   <td>Uno</td>
									   <td>Due</td>
									   <td>Tre</td>
									   <td>Quattro</td>
									   <td>Cinque</td>
									   <td>Sei</td>
									   <td>Sette</td>
									   <td>Otto</td>
									   <td>Sei</td>
									   <td>Sette</td>
									   <td>Otto</td>
									</tr>
									<tr>
									   <td>Uno</td>
									   <td>Due</td>
									   <td>Tre</td>
									   <td>Quattro</td>
									   <td>Cinque</td>
									   <td>Sei</td>
									   <td>Sette</td>
									   <td>Otto</td>
									   <td>Sei</td>
									   <td>Sette</td>
									   <td>Otto</td>
									</tr>
									<tr class="odd">
									   <td>Uno</td>
									   <td>Due</td>
									   <td>Tre</td>
									   <td>Quattro</td>
									   <td>Cinque</td>
									   <td>Sei</td>
									   <td>Sette</td>
									   <td>Otto</td>
									   <td>Sei</td>
									   <td>Sette</td>
									   <td>Otto</td>
									</tr>
									<tr>
									   <td>Uno</td>
									   <td>Due</td>
									   <td>Tre</td>
									   <td>Quattro</td>
									   <td>Cinque</td>
									   <td>Sei</td>
									   <td>Sette</td>
									   <td>Otto</td>
									   <td>Sei</td>
									   <td>Sette</td>
									   <td>Otto</td>
									</tr>
									<tr class="odd">
									   <td>Uno</td>
									   <td>Due</td>
									   <td>Tre</td>
									   <td>Quattro</td>
									   <td>Cinque</td>
									   <td>Sei</td>
									   <td>Sette</td>
									   <td>Otto</td>
									   <td>Sei</td>
									   <td>Sette</td>
									   <td>Otto</td>
									</tr>
								</table>
							</div>
						</td>
					</tr>
				</table>
			</div>
		</td>
	</tr>
</table>
</div>
</body>
</html>
    Rispondi quotando Rispondi quotando
  3. 20-05-2013, 19:55 #3
    Pierale49
    Pierale49 non è in linea
    Utente di HTML.it
    Registrato dal
    Oct 2012
    Messaggi
    11
    ciao,

    come capirai sono un principiante e autodidatta; ho creato una pagina .html copiando il tuo codice ma non vedo niente; hai qualche idea?
    grazie per qualsiasi risposta
    ciao
    p.
    Rispondi quotando Rispondi quotando
« Discussione precedente | Prossima discussione »

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  

Regole del Forum

Powered by vBulletin® Version 4.2.1
Copyright © 2026 vBulletin Solutions, Inc. All rights reserved.