einem Element "übriggebliebene" Höhe/Breite zuweisen

[Gunnar Bittersmann]

@@Azzu:

nuqneH

In vernünftigen Browsern kann man dan 'tbody' scrollen lassen bei festem 'thead'.

und wie oO?

fest = fixed. Da 'thead' damit aus dem Fluss genommmen wird, sich die Breite der Zellen also nicht an den Breiten der Zellen des 'tbody' orientiert, sind explizite Breitenangaben nötig.

Außerdem braucht 'thead' einen Hintergrund; beim Default 'transparent' würde der 'tbody' sonst beim Scrollen unter dem 'thead' sichtbar sein. Die Tabelle muss am oberen Viewportrand beginnen; der Abstand wird über die Zellen des 'thead' geregelt:

html, body  
{  
	margin-top: 0;  
	padding-top: 0;  
}  
  
table  
{  
	border-collapse: collapse;  
}  
  
th, td  
{  
	text-align: left;  
	vertical-align: top;  
	width: 6em;  
}  
  
thead  
{  
	position: fixed;  
	background: white;  
}  
  
thead tr:first-child>*  
{  
	padding-top: 1.5em;  
}  
  
tbody tr:first-child>*  
{  
	padding-top: 3em;  
}

Markup:

<table>  
	<thead>  
		<tr><th>#</th><th>foo</th><th>bar</th><th>baz</th><th>quz</th></tr>  
	</thead>  
	<tbody>  
		<tr><th>1</th><td>foo</td><td>bar</td><td>baz</td><td>quz</td></tr>  
		<tr><th>2</th><td>foo</td><td>bar</td><td>baz</td><td>quz</td></tr>  
		<!-- usw. bis -->  
		<tr><th>666</th><td>foo</td><td>bar</td><td>baz</td><td>quz</td></tr>  
	</tbody>  
</table>

Qapla'