[HTML-CSS-JS?] - [Tabella con intestazione FISSA]

[PhoEniX-VooDoo]

Non riesco a capire se questa cosa nn sia possibile o sono io che nn trovo come fare

In pratica ho una tabella (che si popola da DB) la quale ha 14 colonne e decine/centinaia di righe (parliamo di una web app).

Quello che nn riesco a fare è mantenere fissa l'intestazione (o la testa che dir si voglia) delle colonne, al fine di poter sapere che colonna si sta guardando anche scorrendo i record.

"Soluzione" attuale: Ho messo la tabella in un div con altezza e larghezza fissi + barre di scorrimento (sia vert. che orriz.). In questo modo mantengo un'impaginazione pulita, però appena inizi a scorrere i record verticalmente sparisce la colonna con le intestazioni.

In sostanza l'effetto che mi serve è come quello che permette excel, dove "A, B, C, D..." resta fisso, mentre le righe sotto scorrono...


idee?

[Big Bamboo]

Prova con position fixed
Non ho idea se lo si possa applicare solo a thead o si debba fare un elemento apposta.

[Xfree]

Ho avuto la tua stessa esigenza circa un anno fa anche se per fini diversi, considerando : il tempo trascorso, il fatto che avevo trovato la soluzione su internet, non ricordando cosa ho modificato, ti posto qua il css che ho usato per il sito personale presente nel profilo.

/* CSS Document */

/* datTable for styling only */
body {
	font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	color: #4f6b72;
	background: #E6EAE9;
}


table {
	table-layout: auto;
	margin-left: auto; 
	margin-right: auto;
	/*border-collapse:collapse;*/
}

caption {
	padding: 0 0 5px 0;
	width: 700px;	 
	font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	text-align: right;
}


table.dataTable {
    margin: 0;
    padding: 0;
	/*border-bottom: 1px solid #999;
	border-left: 1px solid #999;*/
}

table.dataTable th {
    font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	color: #4f6b72;
	border-right: 1px solid #C1DAD7;
	border-bottom: 1px solid #C1DAD7;
	border-top: 1px solid #C1DAD7;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-align: center;
	padding: 6px 6px 6px 12px;
	background: #CAE8EA url('bg.jpg');
}

table.dataTable td {
	border-right: 1px solid #C1DAD7;
	border-bottom: 1px solid #C1DAD7;
	background: #fff;
	padding: 6px 6px 6px 12px;
	color: #4f6b72;
}

/* This makes the scrolling table work */

div.scrollTableContainer {
	height: 285px;	
    overflow: auto;
	width: 970px;
	margin: 0 auto;
	position: relative;
}

/* The different widths below are due to the way the scroll bar is implamented
we are keeping these here instead of putting them in the IE css file b/c it 
is easier to change the width if both numbers are in the same place. */

/* All browsers accept this, but we are targeting IE with this rule */
div.scrollTableContainer table {
	width: 952px;
}

/* Modern browsers accept this (not IE) and we are targetting firefox */
html>/**/body div.scrollTableContainer table {
    width: 970px;
}

/* Modern browsers accept this (not IE) and we are targetting firefox */
html>/**/body div.scrollTableContainer table>tbody	{  
    overflow: auto; 
    height: 250px;
    overflow-x: hidden;
}

div.scrollTableContainer thead tr	{
	position:relative;
}

/*prevent Mozilla scrollbar from hiding cell content*/
div.scrollTableContainer td:last-child {padding-right: 20px;}

Il codice html ha il seguente schema

<div class="scrollTableContainer">
<table class='dataTable' cellspacing='0'>

con all'interno la separazione tra thead e tbody.

[Torav]

puoi provare usando fixed, funziona sicuramente su tutti i browser che rispettano decentemente gli standard (il che ovviamente elimina subito explorer dalla lista , almeno fino al 7!), magari applicandolo ad un div in cui crei una tabella contenente solo le intestazioni che vuoi mantenere sempre (e dandogli uno z-index maggiore!)