Fixed HTML TABLE header

Sveiki,

Reikia padaryti Table su fixed header. Kitaip tariant reikia kad pati body dalis scrollintusi, o thead liktų vietoje.

Buvau sugalvojęs padaryti taip:

Sukurti du table, antrąjį table įmesti į divą kuriam padaryti overflow:scroll, visiems TD uždėti css width atitinkamus.

Atrodo, viskas gerai, bet žiūrint per skirtingas rezoliucijas, nušoka td dydžiai ir susimala viskas.

Gal žinote kokį nors geresnį sprendimą?

Bandžiau skirtingus jQuery pluginus, bet nei vienas nesuveikė gerai.

Ačiū.

O būtinai reikia table?

https://www.google.lt/#hl=lt&output=search&sclient=psy-ab&q=css+fixed+header&oq=css+fixed+hea&aq=1K&aqi=g1g-K3&aql=&gs_l=hp.3.1.0j0i30l3.0.0.2.299.0.0.0.0.0.0.0.0..0.0...0.0.V6_r4OtdOsA&pbx=1&bav=on.2,or.r_gc.r_pw.r_qf.,cf.osb&fp=76b3f492feb04fa2&biw=1366&bih=596

nes čia dauguma su divais

Na, pas mane Labai daug <tr>'u, puslapiavimas netinka. Reikia, kad scrolintųsi contentas, bet <th>'ai liktų.

Anyone? :?

*Susimaisiau*

html:

<table>
<thead class="scroll_fixed">
	<th>head</th>
	<th>head #2</th>
	<th>head #3</th>
</thead>
<tbody>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
</tbody>
</table>

css:

table td { width: 500px; min-width: 500px; }
table th { width: 500px; min-width: 500px; }
table thead { position: fixed; }

js/jQuery:

var leftInit = $(".scroll_fixed").offset().left;
$(window).scroll(function(event) {
var x = 0 - $(this).scrollLeft();

       $(".scroll_fixed").offset({
			left: x + leftInit
       });
});

reikia ir pačio jQuery, žinoma.

JS kodas reikalingas tam, kad scrollinant horizontaliai, kas bus reikalinga norint išlaikyti fiksuotus cell'iu pločius prie mažesnių rezoliucijų, thead slinktų kartu.

Mr. Metanas - šitie būdai išbandyti, su rezoliucija pabėga.

iGor - Ačiū, bet čia irgi nelabai gerai, kadangi negalima atskirai padaryti tbody'iui overflow:scroll (anksčiau buvo įmanoma, dabar kažkodėl jau ne), tai vistiek table reikia skaldyti į du atskirus, ir todėl nesuveikia toks sprendimas.

Bandei http://www.tablefixedheader.com/fullpagedemo/?

Dėkui MR METANAS, šitas padėjo! :)