Liste mit fixem Header erstellen

Gawan

Hallo zusammen,

nach mehreren (erfolglosen) Anläufen versuche ich es jetzt nochmal.

Ich habe hier eine dynamisch generierte Liste http://gawan.mine.nu

Ich würde die Liste jetzt gerne so umbauen dass der Header - also die Zeile mit den Spaltennamen - fix stehenbleibt und der Zeileninhalt (in einem fixen Rahmen) SCROLLBAR ist.
Wichtig dabei ist, dass der Header und die darunterliegende Spalten mitsammen verbunden bleiben und auch in dem Fall, dass die Texteinträge in den Spalten breiter werden und somit die Spaltenbreite verändert wird, nicht komplett auseinander laufen.

Perfekt wäre eine Lösung mit CSS, da ich für eine Ausgabe am Drucker die Scrollfunktion in einem Stylesheet abschalten möchte.

Bin für jeden Hilfe dankbar !!

lG
Gawan

mantiz

Hi,

folgendes funktioniert bei mir im Firefox (1.5.0.7):

<!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="de">

	<head>
		<title>[ untitled ]</title>

		<meta name="Content-Type" content="text/html; charset=iso-8859-1" />

		<style type="text/css">
			.table { display: table; width: 300px; border: 1px solid #000; }
			.thead { display: table-header-group; }
			.tr    { display: table-row; }
			.th    { display: table-cell; background: #EEE; border-bottom: 1px solid #000; font-weight: bold; }
			.tbody { display: table-row-group; height: 100px; overflow-y: auto; overflow-x: hidden; }
			.td    { display: table-cell; }
		</style>

	</head>

	<body>

		<div class="table">
			<div class="thead">
				<div class="tr">
					<div class="th">id</div>
					<div class="th">name</div>
				</div>
			</div>

			<div class="tbody">
				<div class="tr">
					<div class="td">1</div>
					<div class="td">Hans</div>
				</div>
				<div class="tr">
					<div class="td">1</div>
					<div class="td">Hans</div>
				</div>
				<div class="tr">
					<div class="td">1</div>
					<div class="td">Hans</div>
				</div>
				<div class="tr">
					<div class="td">1</div>
					<div class="td">Hans</div>
				</div>
				<div class="tr">
					<div class="td">1</div>
					<div class="td">Hans</div>
				</div>
				<div class="tr">
					<div class="td">1</div>
					<div class="td">Hans</div>
				</div>
				<div class="tr">
					<div class="td">1</div>
					<div class="td">Hans</div>
				</div>
				<div class="tr">
					<div class="td">1</div>
					<div class="td">Hans</div>
				</div>
				<div class="tr">
					<div class="td">1</div>
					<div class="td">Hans</div>
				</div>
				<div class="tr">
					<div class="td">1</div>
					<div class="td">Hans</div>
				</div>
			</div>

		</div>

	</body>

</html>

Meine anderen Browser (Netscape 7.1, Opera 8.5 und IE 6.0) zeigen dies fehlerhaft an. Wobei Netscape und Opera wenigstens noch die Tabelle darstellen, aber nicht scrollen, so zeigt der IE die Tabelle fehlerhaft an, dafür wird aber gescrollt.

Ich glaube man kann das auch mit den normalen HTML-Tags so hinbekommen, indem man die overflow-Dinge (s.o.) per CSS dem tbody-Element zuweist.
Musst Du mal ausprobieren.

Eine andere Variante fällt mir leider nicht ein.

Gawan

Ich habe jetzt die Tabelle an eine Vorlage angepasst - es sieht im IE6.0 auch genauso aus wie ich mir das vorstelle.

http://gawan.mine.nu

Problem ist, dass es im IE7.0 und auch im Firefox wieder komplett anders aussieht - speziell wenn die Einträge in den Spalten länger werden als geplant.

http://gawan.mine.nu/default2.asp

Ich muss mich wohl damit abfinden dass das nicht so funktioniert wie ich will :(:(

Hat jemand eine Idee wie ich es jetzt noch schaffe dass die Seite am Drucker ohne den Scrollbalken angezeigt wird, also die komplette Liste ?

Danke
Gawan