table con header fisso

[delfina blu]

Allora, so che cis può fare ma io ho un problema: se l'header della tabella è formato da più <tr> (intestazione complessa) il tutto non funziona.

Link la pagina HTML da cui potete ottenere tutto il codice e sicuramente visualizzare a colpo d'occhio cosa non funziona.

Nota: visualizzare con IE perchè con Firefox non funziona. Per ora la mia priorità è IE causa cliente, una volta chiuso quello passerò all'ottimizzazione multi-browser.

Baci
Delfy

[andrea.paiola]

si con IE scazza di brutto... con FF invece è perfetto...
e non ho idea del perchè... mi spiace... sicuramente è un bug di IE comunque... magari sono più bugs di IE insieme...

[Moro]

se hai preso quello script da alistapart, prova a confrontare l'originale con il tuo...magari per errore ha messo uno spazio fra due tag (basta quello per creare problemi con IE)

[delfina blu]

Originariamente inviato da andrea.paiola
si con IE scazza di brutto... con FF invece è perfetto...
e non ho idea del perchè... mi spiace... sicuramente è un bug di IE comunque... magari sono più bugs di IE insieme...

è esattamente in contrario:
con FF è completamente errato mentre con IE l'unico problema che ho è che non mi visualizza il rowspan.

@moro: che tag?

avete controllato il codice e non solo quello che viene visualizzato nel browser? vi sareste accorti che quello che c'è scritto è una cosa, quello che è visualizzato è un'altra cosa.

[andrea.paiola]

Originariamente inviato da delfina blu
è esattamente in contrario:
con FF è completamente errato mentre con IE l'unico problema che ho è che non mi visualizza il rowspan.

con IE non riesco neanche a leggere le intestazioni...

[delfina blu]

sicuramente avrai notato dal codice che:
1. che "cippa" e "cippa sorella" vanno sotto Header 1
2. con FF le colonne sono tutte disallineate
3. con IE le colonne sono TUTTE allineate
4. sia con IE che con FF l'intestione è formata da 2 righe e in nessun browser è visualizzato giusto e che il meno schifoso è IE

[andrea.paiola]

Originariamente inviato da delfina blu
sicuramente avrai notato dal codice che:
1. che "cippa" e "cippa sorella" vanno sotto Header 1
2. con FF le colonne sono tutte disallineate
3. con IE le colonne sono TUTTE allineate
4. sia con IE che con FF l'intestione è formata da 2 righe e in nessun browser è visualizzato giusto e che il meno schifoso è IE

il codice al momento non l'ho neanche letto...
ho dato solo un'occhiata attraverso i due browsers e mi sembrava si vedesse meglio su FF (almeno riesco a leggere cosa c'è scritto negli header)... tu non hai detto come le volevi percui...

[delfina blu]

Questo è il codice CSS che gestisce il mio documento:

body {
	background: #FFF;
	color: #000;
	font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
	margin: 10px;
	padding: 0
}

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

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

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

/* 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;
}

/* 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: 495px;
	overflow: auto;
}

/* 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;
}

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

/* 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;
}

/* 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;
}

Lavoriamo SOLO con IE. Ho scoperto che il tutto sta nella gestione dello stile che ho messo in grassetto.
Se:
- position è settata a relative tutti i rowspan è come se non venissero visualizzati;
- se la position è settatta con altri valori (absolute, static,...) i rowspan sono giustamente rappresentati dal broser ma l'header della table scorre insieme al body invece che restare fisso.

Suggerimenti per vedere correttamente il rowspan e fissare l'intestazione della tabella?

[andrea.paiola]

a quello che vuoi rimanga fisso (thead.fixedHeader tr se non ho capito male) devi dare:

width:28%; height:100%; position:fixed; overflow:auto;

le dimensioni (width e height) potrebbero non andare bene ma un valore lo devi senz'altro dare: fai un po' di prove.

[delfina blu]

allora, la cosa è risolta con IE ma non con FF:
ho commentato questa parte di codice CSS

thead.fixedHeader tr {
	position: relative;
}

e ho messo questo stile nelle singole celle dell'intestazione della tabella.

ora come faccio a renderlo ben formattato anche con FF? se avete dei problemi a vedere il file funzionante con IE è un problema di cache