✔ Head und Foot einer Tabelle fest Body scrollbar

B

Binio

Erfahrenes Mitglied
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:
Code: 
<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:
Code: 
<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 :(
 
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:

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


mfg Maik
 
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 :)
 
Binio hat gesagt.:
Der zweite Post ist die Lösung ...
Zum Vergrößern anklicken....
... 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.
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück