✔ Tabelle mit fixed Header

[aKraus]

Hallo,ich hab bereits gegoogled, aber leider nicht passendes gefunden.Ich will in HTML mittels CSS ein Grid erzeugen, welches ungefähr den Windowsstyle entspricht. Also sozusagen soll die erste Zeile (Header), sowie die linke Spalte immer fest dargestellt werden während der Rest scrollbar sein soll (Bild im Anhang). Mein Problem ist, dass ich leider keine Lösung finde, welche im IE 6, IE 7 & FF funktioniert.theoretisch könnte ich das mit Javascript machen, nur ist das leider sehr Clientlastig und bei mehr als 100 Zeilen nicht wirklich tragbar

 

[Gumbo]

Es gibt bereits eine Menge fertiger Lösungen. Siehe dazu beispielsweise Data Grids with AJAX, DHTML and JavaScript.

 

[aKraus]

and JavaScript

Ich würde eine CSS Lösung OHNE Javascript bevorzugen.

 

[Gumbo]

Dann probier mal Folgendes:

<div>
	<table border="0" cellspacing="0" cellpadding="0">
		<thead>
			<tr><th>Header</th><th>Header</th><th>Header</th></tr>
		</thead>
		<tbody>

			<tr><td>Data</td><td>Data</td><td>Data</td></tr>
			<tr><td>Data</td><td>Data</td><td>Data</td></tr>
			<tr><td>Data</td><td>Data</td><td>Data</td></tr>
			<tr><td>Data</td><td>Data</td><td>Data</td></tr>

			<tr><td>Data</td><td>Data</td><td>Data</td></tr>
			<tr><td>Data</td><td>Data</td><td>Data</td></tr>
			<tr><td>Data</td><td>Data</td><td>Data</td></tr>
			<tr><td>Data</td><td>Data</td><td>Data</td></tr>

			<tr><td>Data</td><td>Data</td><td>Data</td></tr>
			<tr><td>Data</td><td>Data</td><td>Data</td></tr>
			<tr><td>Data</td><td>Data</td><td>Data</td></tr>
			<tr><td>Data</td><td>Data</td><td>Data</td></tr>

			<tr><td>Data</td><td>Data</td><td>Data</td></tr>
			<tr><td>Data</td><td>Data</td><td>Data</td></tr>
			<tr><td>Data</td><td>Data</td><td>Data</td></tr>
		</tbody>

	</table>
</div>

div {
	position: relative;
	overflow: auto;
	height: 10em;
}
div thead {
	position: fixed;
	background-color: #eee;
}

 

[aKraus]

Hallo, das geht weder im Firefox, nicht im IE7 richtig. Gruß

 

[Maik]

Hi,

schau dir mal http://www.cssplay.co.uk/menu/tablescroll an.