Tabelle ohne Titelzeile scrollen - Problem gelöst

[JürgenB]

Hallo,

erst mal vielen Dank an die Helfer.

Leider scheint es keine einfache Lösung für das Problem zu geben. Die für mich nahe liegende Lösung - tbody mit fester Höhe und Scrollbar - scheitert an den Spezifikations- und Browser-Machern, die das wohl nicht wollten.

Daher bleibt nur die frickelige Lösung mit zusätzlichen DIVs um die Tabelle, absoluten und relativen Positionierungen, festen Höhen und Breiten, Hintergrundfarben, etc..

Im Prinzip hätte hier ein DIV gereicht, aber da ich per Javascript die Inhalte der THs im THEAD ändere, habe ich jetzt eine Lösung mit zwei DIVs um die Tabelle.

Hier mein Quelltext:

  table	{ border:1px solid black; border-spacing:0px; border-collapse:collapse }  
  table td,th { border:1px solid black; border-spacing:0px;  
                border-collapse:collapse; padding:3px }  
  table td { text-align:center; }  
  
  div.scrollcontainer { position:relative; }  
  div.scrollcontainer div { border:2px solid black; padding-top:36px;  
                            display:inline-block; height:10em; overflow-y:scroll }  
  div.scrollcontainer div table thead { position:absolute; left:2px; top:2px; }  
  div.scrollcontainer div table thead th { background-color:#ccd; height:30px }  
  div.scrollcontainer div table tbody td { background-color:#eef }  
  div.scrollcontainer div table thead th { width:100px; }  
  div.scrollcontainer div table tbody td { width:100px; }  
  div.scrollcontainer div table thead th+th { width:150px; }  
  div.scrollcontainer div table tbody td+td { width:150px; }	  

<div class="scrollcontainer"><div>  
  <table>  
    <thead>  
      <tr>  
        <th>Spalte 1</th>  
        <th>Spalte 2</th>  
      </tr>  
    </thead>  
    <tbody>  
      <tr>  
        <td>1</td>  
        <td>a</td>  
      </tr>  
      <tr>  
        <td>2</td>  
        <td>z</td>  
      </tr>  
           <!-- ... -->  
    </tbody>  
  </table>  
</div></div>  

Und hier der Link (der aber nicht ewig funktionieren wird):

Test scrollbare Tabelle

Ich habe das unter Windows 7 im IE 9, IE 10, FF, Chrome und Safari erfolgreich getestet. Im Opera ist der Abstand zwischen Kopf und Inhalt zu groß und der Kopf verschwindet beim Scrollen. Im emulierten IE 8 funktionierte es auch, im emulierten IE 7 scrollt alles. Unter Windows Phone 7.8 funktioniert es auch.

Gruß, Jürgen