Fixed Header Liquid table

**Ale88** · 25-11-2011, 13:52

Salve a tutti ragazzi,

è diverso tempo che sto cercando di fissare la prima riga di una table liquida.
La tabella prende il 100% dello schermo.
Vorrei fare in modo che scorrendo la tabella, e di conseguenza la pagina, la prima riga rimanga ferma in modo tale da essere sempre letta.
Avevo pensato di fare 2 tabelle separate e la prima aveva position:fixed, ma purtroppo la seconda (quella con i dati) ha le colonne che variano in larghezza a seconda di cio che c'è scritto dentro. Per questo sono costretto a fare una singola tabella.
Suggerimenti ?
Soluzioni anche diverse da CSS basta che non siano in JQuery..

Grazie anticipatamente

**ResianTaxidrive** · 25-11-2011, 14:31

ma nella seconda tabella non potresti impostare una larghezza per le celle?

**ldetomi** · 25-11-2011, 14:35

Soluzioni diverse da JavaScript le escluderei... l'idea del position:fixed non è male ma dovresti poter fissare le larghezze delle colonne come ti è stato suggerito... NON SO, MA NON PENSO che funzioni tentare di impostare position:fixed solo sulla riga di tabella che contiene le intestazioni.... (e se anche funzionasse mi aspetto che questo non sarebbe compatibile con tutti i browser....)

**Ale88** · 25-11-2011, 14:48

Già ho provato a mettere il fixed sulla prima riga , ma si "sfancula" tutto.
Invece non ha senso impostare la larghezza delle colonne in pixel dato che devo fare un layout liquido

**ResianTaxidrive** · 25-11-2011, 14:52

ma il liquido lo intendi per le diverse risoluzioni di schermo?

Come opinione personale, una tabella troppo larga (se potesse essere anche più stretta) non mi agevolerebbe la lettura.

**ldetomi** · 25-11-2011, 14:52

Ho paura che tu sia costretto a riccorrere a JavaScript, ma esistono sicuramente centinaia di soluzioni già pronte, sia in a JavaScript puro che basato su librerie come JQuery, che però non vuoi usare... o anche mootools, prototype....

**Ale88** · 25-11-2011, 15:11

Il layout è al 100% liquido perchè mi serve per la versione mobile del sito..

Ora come ora sto cercando di creare 2 tabelle diverse..quella del titolo con il fixed dovrebbe prendere le dimensioni dell'altra con i dati tramite javascript..ma non và :

codice:


<!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" lang="it"> 
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15" />
		<meta name="keywords" content="farmacia FARMACIA FaRmAcIa malattia omeopatia fitoterapia naturale 
		farmacie cura donna dieta calorie farmaci impotenza calvizie aids cancro sesso uomo bambino medicina 
		medicine salute fitness libri allopatia malattie infettive vaccini vaccinazione epatite MALATTIA 
		OMEOPATIA FITOTERAPIA NATURALE FARMACIE CURA DONNA DIETA CALORIE FARMACI IMPOTENZA CALVIZIE AIDS 
		CANCRO SESSO UOMO BAMBINO MEDICINA MEDICINE SALUTE FITNESS LIBRI ALLOPATIA MALATTIE INFETTIVE VACCINI
		VACCINAZIONE EPATITE medicinali MEDICINALI Tecnologie Servizi Prodotti farmaceutici cure pressione BAch " />

		<link rel="shortcut icon" href="img/favicon.ico" />
		<link rel="icon" href="img/favicon.ico" />
	
		<link rel="stylesheet" type="text/css" href="css/style.css" />	
	
	
		 
<script language="JavaScript" type="text/javascript">
<!--
function createTable() {
 c     = document.getElementById('codi').offsetWidth;
 n     = document.getElementById('nome').offsetWidth;
 g     = document.getElementById('giac').offsetWidth;
 html  = "";
 html  = '<table summary="" class="titolo" rules="none" >'
 html += '<tr class="titlebg">'
 html += '<td  align="center" width="'+c+'">Codice</td>'
html += '<td  align="center" width="'+n+'">Nome Prodotto</td>'
html += '<td  align="center" width="'+g+'">Q.tà</td>'
 html += '</tr>'
 html += '</table>'
 document.write(html);
}
//-->
</script>

	
		
	</head>
    <body>

					
  	
		
		
		<div id="container">

			
			
			<div id="content">	
                            
<table id="table1" class="main_table" border="1" cellpadding="0" cellspacing="0">
<tr>
				<td id="codi" class="cellCodice tdcodice" align="center" >CODICE MIF</td>
				<td id="nome" class="cellNome tdnome" align="left"><bNOME PRODOTTO[/b]</td>
				<td id="giac" class="tdgiac" 	style="background-color: red;" align="center" >GIACENZA</td>
					
			</tr>
<tr>
				<td id="codi" class="cellCodice tdcodice" align="center" >CODICE MIF</td>
				<td id="nome" class="cellNome tdnome" align="left"><bNOME PRODOTTO[/b]</td>
				<td id="giac" class="tdgiac" 	style="background-color: red;" align="center" >GIACENZA</td>
					
			</tr>
<tr>
				<td id="codi" class="cellCodice tdcodice" align="center" >CODICE MIF</td>
				<td id="nome" class="cellNome tdnome" align="left"><bNOME PRODOTTO[/b]</td>
				<td id="giac" class="tdgiac" 	style="background-color: red;" align="center" >GIACENZA</td>
					
			</tr>
</table>
							
			
		

			</div>
		</div>

<script language="JavaScript" type="text/javascript">
<!--
createTable();
//-->
</script>
	
	</body>
	
</html>

**ResianTaxidrive** · 25-11-2011, 15:21

Forse potresti prendere in considerazione l'idea di fare due fogli stile?

La prossima volta posta html non php, por favor, non è l'area adatta.

**Ale88** · 25-11-2011, 15:33

Eh..hai ragione, ma purtroppo non pensavo di dover postare il codice XD, lo sistemo

EDIT: SISTEMATO

**ldetomi** · 25-11-2011, 16:20

Se usi cmq JavaScript per copiare i dati da una all'altra... tanto vale che lo usi con uno scriptino già pronto che fa specificatamente ciò che vuoi ovvero tenere ferma la riga delle intestazioni... Usarlo per usarlo... usa una soluzione già pronta che fa esattamente ciò che vuoi tenendoti il mark up semplice con una sola tabella... altrimenti è come sparare a una mosca con un cannone... ti complichi la vita!!!!

Discussione: Fixed Header Liquid table

Strumenti discussione

Ricerca discussione

Visualizza

Fixed Header Liquid table

Permessi di invio