✔ Head und Foot einer Tabelle fest Body scrollbar

[Binio]

Ich habe hier x verschiedene Beispiele durchgelesen.
Doch leider ist das TD fest oder es ist Javascript dahinter

Ich möchte jedoch keine Javascript lösung und auch sollen die Spaltenbreiten flexibel bleiben.

also ich will:

<thead> // fest
<tr><td>kaufpreis1</td><td>...</td><td>kaufpreis100</td></tr>
</thead>

<tbody> //Ab 4(oder mehr) Zeilen soll eine Scrollbar erscheinen
<tr><td>500</td><td>...</td><td>456546</td></tr>
<tr><td>10250</td><td>...</td><td>456433456</td></tr>
<tr><td>4027875458</td><td>...</td><td>456786546</td></tr>
<tr><td>488</td><td>...</td><td>4565467866554456</td></tr>
...
</tbody>

<tfoot> // fest
<tr><td>Gesamtkaufpreis1</td><td>...</td><td>Gesamtkaufpreis100</td></tr>
</tfoot>

Kann mir da jemand helfen ?
Meine bisherige Lösung:

<table rules='groups' class='etable'>
    <thead>
    <tr style='background-color:grey;'
        <th style='white-space:nowrap;'>Ueb1</th>
        <th style='white-space:nowrap;'>Ueb2</th>
    </tr>
    </thead>

    <tbody>
    <tr>
        <td colspan='2'>
            <div style='overflow:scroll;height:500px;'>
                <table border='1'>
                        <tr>
                            <td>$value['ob1']</td>
                            <td>$ob2gruppe['text']</td>
                        </tr>
                </table>
            </div>
        </td>
    </tr>
    </tbody>

    <tfoot>
    <tr>
        <td>Gesamt blabla</td>
        <td>Gesamt blabla</td>
    </tr>
    </tfoot>
</table>

Riesen Problem dabei ist, dass der aufgezählte Inhalt eine andere Spaltenbreite bekommt als die im Headteil stehenden Überschriften. Dadurch verrutschen alle Einträge

 

[Maik]

Hi,

vielleicht hilft hier zum Fixieren des Tabellenkopfs und -fußes http://www.cssplay.co.uk/menu/tablescroll oder auch http://www.pmob.co.uk/temp/table-fixed-header.htm weiter.

Übrigens werden im Tabellengerüst <thead> und <tfoot> an erster Stelle genannt, danach folgt dann der Tabellenkörper.

Und hier ist mir die scheinbar fehlende >-Klammer aufgefallen, die negative Folgen für die Tabellendarstellung haben dürfte:

<tr style='background-color:grey;'

mfg Maik

 

[Binio]

Der zweite Post ist die Lösung
Danke einfach Body Scrollen lassen

Was mir da nicht so gefällt ist das es immer auf 500 Pixel gestreckt wird.
Wenn z.B. nur ein Eintrag vorhanden ist wird dieser extrem gestreckt
Aber das bekomme ich schon hin

 

[hela]

Der zweite Post ist die Lösung ...

... aber nur für die Mozilla-Browser und den Internet-Explorer. In Opera, Safari und Chrome hast du wieder die volle Tabelle. Außerdem solltest du dir auch mal im Firefox die Druckvorschau dieser Lösung ansehen: Dort ist die Tabelle unvollständig.

Die Lösung von Stu Nicholls (Method #2) mit der doppelten Tabelle kommt einer Cross-Browser-Lösung schon näher. Allerdings hat man hier für das Drucklayout auch größeren Aufwand im CSS, um die vollständige Tabelle darzustellen.

edit:
Habs's gerade gelesen, dass du die Spaltenbreiten flexibel haben möchtest. Dann bleib bei deiner Wahl.
Bei den doppelten Tabellen musst du feste Spaltenbreiten haben, sonst wird das nichts.