[CSS] Table con header fisso

**NoR** · 06-12-2006, 13:00

So che è già stata fatta questa domanda, ma visto che la discussione si interruppe nel 2002 senza che fosse postata una soluzione, ripongo il quesito:

Avendo una tabella, con un header e molte righe, è possibile (e come) rendere scorrevoli le righe mantenendo fisso l'header?

Un po' l'effetto che si ottiene con Excell bloccando i riquadri...

Qualcuno sa come fare?

Grazie!

**Mich_** · 06-12-2006, 13:28

Se la tabella e` realizzata con i tag corretti, la cosa e` (quasi) automatica (in browser moderni).

Ti basta definire un'altezza (massima) per il <tbody> e definirci
overflow: auto;

Se invece la tabella non usa il <tbody> e <thead>, la cosa non credo sia possibile. Ma questo e` un errore semantico, prima che un problema dei CSS.

PS: risposte di questo tipo ne sono gia` state date in passato.

**NoR** · 06-12-2006, 13:34

Grazie e scusa per la ripetizione...

**NoR** · 06-12-2006, 13:42

Sorry, ma non funziona... Potresti linkarmi alle vecchie discussioni? Thks!

Io ho fatto così:

codice:

<html>
<head>
<title></title>		
<style>
#dataTable{
	border-collapse: collapse;
	border: black 1px solid;
	width: 452px;
	height: 100px;
	background-color: #f7f7f7;
	}
#dataTable theader{
	position: absolute;
	}
#dataTable tbody{
	height: 50px;
	owerflow: auto;
	}
#dataTable th{
	background-color: Wheat;
	border: none;
	border-right: #666 1px solid;
	}
#dataTable td{
	white-space: nowrap;
	border: 1px silver solid;
	padding: 2px;
	height: 20px;
	}
</style>		
</head>	
<body>	
<table id="dataTable">
<thead>
	<th>Header 1</th>
	<th>Header 2</th>
</thead>
<tbody>	
	<tr>
	<td>Row 1 cell 1</td>
	<td>Row 1 cell 2</td>
	</tr>
	<tr>
	<td>Row 1 cell 1</td>
	<td>Row 1 cell 2</td>
	</tr>
	<tr>
	<td>Row 1 cell 1</td>
	<td>Row 1 cell 2</td>
	</tr>
	<tr>
	<td>Row 1 cell 1</td>
	<td>Row 1 cell 2</td>
	</tr>
	<tr>
	<td>Row 1 cell 1</td>
	<td>Row 1 cell 2</td>
	</tr>
	<tr>
	<td>Row 1 cell 1</td>
	<td>Row 1 cell 2</td>
	</tr>				
</tbody>
</table>
</body>
</html>

Vi *4* · 06-12-2006, 15:20

interessa anche a me

**NoR** · 06-12-2006, 15:36

Ho trovato questa soluzione: la posto nel caso servisse ad altri!
Fa uso di JavaScript e CSS e funziona con tutti i browser... (anche se non ho finito di testarla...)

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>Prova</title>
<script type="text/javascript">
<!--
/* http://www.alistapart.com/articles/zebratables/ */
function removeClassName (elem, className) {
	elem.className = elem.className.replace(className, "").trim();
}

function addCSSClass (elem, className) {
	removeClassName (elem, className);
	elem.className = (elem.className + " " + className).trim();
}

String.prototype.trim = function() {
	return this.replace( /^\s+|\s+$/, "" );
}

function stripedTable() {
	if (document.getElementById && document.getElementsByTagName) {  
		var allTables = document.getElementsByTagName('table');
		if (!allTables) { return; }

		for (var i = 0; i < allTables.length; i++) {
			if (allTables[i].className.match(/[\w\s ]*scrollTable[\w\s ]*/)) {
				var trs = allTables[i].getElementsByTagName("tr");
				for (var j = 0; j < trs.length; j++) {
					removeClassName(trs[j], 'alternateRow');
					addCSSClass(trs[j], 'normalRow');
				}
				for (var k = 0; k < trs.length; k += 2) {
					removeClassName(trs[k], 'normalRow');
					addCSSClass(trs[k], 'alternateRow');
				}
			}
		}
	}
}

window.onload = function() { stripedTable(); }
-->
</script>
<style type="text/css">
<!--
/* Terence Ordona, portal[AT]imaputz[DOT]com         */
/* http://creativecommons.org/licenses/by-sa/2.0/    */

/* begin some basic styling here                     */
body {
	background: #FFF;
	color: #000;
	font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
	margin: 10px;
	padding: 0
}

table, td, a {
	color: #000;
	font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif
}

h1 {
	font: normal normal 18px Verdana, Geneva, Arial, Helvetica, sans-serif;
	margin: 0 0 5px 0
}

h2 {
	font: normal normal 16px Verdana, Geneva, Arial, Helvetica, sans-serif;
	margin: 0 0 5px 0
}

h3 {
	font: normal normal 13px Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #008000;
	margin: 0 0 15px 0
}
/* end basic styling                                 */

/* define height and width of scrollable area. Add 16px to width for scrollbar          */
div.tableContainer {
	clear: both;
	border: 1px solid #963;
	height: 285px;
	overflow-y: auto;
	width: 756px
}

/* Reset overflow value to hidden for all non-IE browsers. */
html>body div.tableContainer {
	overflow: hidden;
	width: 756px
}

/* define width of table. IE browsers only                 */
div.tableContainer table {
	float: left;
	width: 740px
}

/* define width of table. Add 16px to width for scrollbar.           */
/* All other non-IE browsers.                                        */
html>body div.tableContainer table {
	width: 756px
}

/* set table header to a fixed position. WinIE 6.x only                                       */
/* In WinIE 6.x, any element with a position property set to relative and is a child of       */
/* an element that has an overflow property set, the relative value translates into fixed.    */
/* Ex: parent element DIV with a class of tableContainer has an overflow property set to auto */
thead.fixedHeader tr {
	position: relative
}

/* set THEAD element to have block level attributes. All other non-IE browsers            */
/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
html>body thead.fixedHeader tr {
	display: block
}

/* make the TH elements pretty */
thead.fixedHeader th {
	background: #C96;
	border-left: 1px solid #EB8;
	border-right: 1px solid #B74;
	border-top: 1px solid #EB8;
	font-weight: normal;
	padding: 4px 3px;
	text-align: left
}

/* make the A elements pretty. makes for nice clickable headers                */
thead.fixedHeader a, thead.fixedHeader a:link, thead.fixedHeader a:visited {
	color: #FFF;
	display: block;
	text-decoration: none;
	width: 100%
}

/* make the A elements pretty. makes for nice clickable headers                */
/* WARNING: swapping the background on hover may cause problems in WinIE 6.x   */
thead.fixedHeader a:hover {
	color: #FFF;
	display: block;
	text-decoration: underline;
	width: 100%
}

/* define the table content to be scrollable                                              */
/* set TBODY element to have block level attributes. All other non-IE browsers            */
/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
/* induced side effect is that child TDs no longer accept width: auto                     */
html>body tbody.scrollContent {
	display: block;
	height: 262px;
	overflow: auto;
	width: 100%
}

/* make TD elements pretty. Provide alternating classes for striping the table */
/* http://www.alistapart.com/articles/zebratables/                             */
tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
	background: #FFF;
	border-bottom: none;
	border-left: none;
	border-right: 1px solid #CCC;
	border-top: 1px solid #DDD;
	padding: 2px 3px 3px 4px
}

tbody.scrollContent tr.alternateRow td {
	background: #EEE;
	border-bottom: none;
	border-left: none;
	border-right: 1px solid #CCC;
	border-top: 1px solid #DDD;
	padding: 2px 3px 3px 4px
}

/* define width of TH elements: 1st, 2nd, and 3rd respectively.          */
/* Add 16px to last TH for scrollbar padding. All other non-IE browsers. */
/* http://www.w3.org/TR/REC-CSS2/select...cent-selectors        */
html>body thead.fixedHeader th {
	width: 200px
}

html>body thead.fixedHeader th + th {
	width: 240px
}

html>body thead.fixedHeader th + th + th {
	width: 316px
}

/* define width of TD elements: 1st, 2nd, and 3rd respectively.          */
/* All other non-IE browsers.                                            */
/* http://www.w3.org/TR/REC-CSS2/select...cent-selectors        */
html>body tbody.scrollContent td {
	width: 200px
}

html>body tbody.scrollContent td + td {
	width: 240px
}

html>body tbody.scrollContent td + td + td {
	width: 300px
}
-->
</style>
</head><body>

<h1>Prova</h1>

<div id="tableContainer" class="tableContainer">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="scrollTable">
<thead class="fixedHeader">
	<tr>
		<th>Header 1</th>
		<th>Header 2</th>
		<th>Header 3</th>
	</tr>
</thead>
<tbody class="scrollContent">
	<tr>
		<td>Cell Content 1</td>
		<td>Cell Content 2</td>
		<td>Cell Content 3</td>
	</tr>
	<tr>
		<td>More Cell Content 1</td>
		<td>More Cell Content 2</td>
		<td>More Cell Content 3</td>
	</tr>
	<tr>
		<td>Even More Cell Content 1</td>
		<td>Even More Cell Content 2</td>
		<td>Even More Cell Content 3</td>
	</tr>
	<tr>
		<td>And Repeat 1</td>
		<td>And Repeat 2</td>
		<td>And Repeat 3</td>
	</tr>
	<tr>
		<td>Cell Content 1</td>
		<td>Cell Content 2</td>
		<td>Cell Content 3</td>
	</tr>
	<tr>
		<td>More Cell Content 1</td>
		<td>More Cell Content 2</td>
		<td>More Cell Content 3</td>
	</tr>
	<tr>
		<td>Even More Cell Content 1</td>
		<td>Even More Cell Content 2</td>
		<td>Even More Cell Content 3</td>
	</tr>
	<tr>
		<td>End of Cell Content 1</td>
		<td>End of Cell Content 2</td>
		<td>End of Cell Content 3</td>
	</tr>
</tbody>
</table>
</div>





<div id="tableContainer2" class="tableContainer">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="scrollTable">
<thead class="fixedHeader">
	<tr>
		<th>Header 1</th>
		<th>Header 2</th>
		<th>Header 3</th>
	</tr>
</thead>
<tbody class="scrollContent">
	<tr>
		<td>Cell Content 1</td>
		<td>Cell Content 2</td>
		<td>Cell Content 3</td>
	</tr>
	<tr>
		<td>More Cell Content 1</td>
		<td>More Cell Content 2</td>
		<td>More Cell Content 3</td>
	</tr>
	<tr>
		<td>Even More Cell Content 1</td>
		<td>Even More Cell Content 2</td>
		<td>Even More Cell Content 3</td>
	</tr>
	<tr>
		<td>And Repeat 1</td>
		<td>And Repeat 2</td>
		<td>And Repeat 3</td>
	</tr>
	<tr>
		<td>Cell Content 1</td>
		<td>Cell Content 2</td>
		<td>Cell Content 3</td>
	</tr>
	<tr>
		<td>More Cell Content 1</td>
		<td>More Cell Content 2</td>
		<td>More Cell Content 3</td>
	</tr>
	<tr>
		<td>Even More Cell Content 1</td>
		<td>Even More Cell Content 2</td>
		<td>Even More Cell Content 3</td>
	</tr>
	<tr>
		<td>End of Cell Content 1</td>
		<td>End of Cell Content 2</td>
		<td>End of Cell Content 3</td>
	</tr>
</tbody>
</table>
</div>
<div>
Prova di scroll della pagina...




















































</div>

</body></html>

Vi *4* · 06-12-2006, 15:39

grazie!

**Mich_** · 06-12-2006, 15:50

Le vecchie discussioni le dovresti trovare tramite una ricerca nel forum con chiave "thead tbody".

Attenzione che nel codice HTML e CSS ci sono errori:
Manca il <tr> a racchiudere i <td> della <thead>
il tag theader non esiste (lo hai usato nel CSS).

Ma se definisci un blocco con posizionam. assoluto, questo esce dalla logica del resto della pagina.
In linea di massima i posizionamenti non sono da usare. per il resto dovrebbe essere corretto (ma per sicurezza, fatti un giro dai validatori).

Inoltre evita di testare con IE6: ha piu` bachi delle industrie tessili. Se poi non funziona in IE, si riescono a trovare strumenti JS per ovviare.

===
@NoR
Ci sono alcuni problemi:
1. usi formattazione HTML: questo puo` impedire il coretto funzionamento dei CSS
2. Il JS, se ho capito giusto, serve per alternare il colore delle righe. A parte che lo stesso effetto si puo` raggiungere con strumenti lato server (senza JS), e` fuori tema per l'argomento di cui stiamo trattando.

Discussione: [CSS] Table con header fisso

Strumenti discussione

Ricerca discussione

Visualizza

[CSS] Table con header fisso

Permessi di invio