Tabelle mit erster Zeile wiederholen

eb-stefan

Hallo,
ich habe eine Seite mit mehreren Frames (leider aber ist halt so)
Es handelt sich um ein Auswertungsportal mit vielen Tabellen.

es werden nun lange tabellen dargestellt, die leider sehr unübersichtlich sind wenn wir über 50 Zeilen haben.

Nun bin ich auf der suchen nach guten lösungen.
ich habe mir schon 2 sachen überlegt.

1. das ganze auf mehrere Seiten verteilen.
(kommt jedoch nur im notfall soweit, da es dann ja auch sehr unübersichtlich ist)
2. Irgendwie mit CSS oder Ajax/Java... keine Ahnung die erste Zeile oben an der kante fixieren
ähnlich wie bei Excel oder Access

hat hier jemand eine Idee?
ist eine Tabelle die mit PHP gefüllt wird (also alles dynamisch)

Gruß + Dank
Stefan

synaptic

also du willst letztlich nur die tableheader wiederholen?
dann kannste entweder alle x zeilen die header wiederholen, sieht nich gut aus aber is praktikabel..
andere variante (geht aber nur im ff und ie7 und höher, sowie anderen modernen browsern) du machst nen div, da kloppste die table-header rein und machst des div mit position:fixed als style am oberen rand fest. sollte iegtnlich auch klappen.
is alles ungetestet und nur ne idee

jojo87

ich meine auch mal was von automatischer Wiederholung der <thead>'s gehört zu haben.
Mal google anschmeissen.....

FaFoo

http://www.cssplay.co.uk/menu/tablescroll
Da steht... works in ie... aber nicht welche Version.
probier mal... css only

eb-stefan

irgendwie krieg ich es nicht hin.
wo finde ich denn den benötigen css code für diese tabellen
http://www.cssplay.co.uk/menu/tablescroll

edit:
-ich muss die erste Zeile oben fixieren
-Horizontal muss das scrollen gehen
-Vertikal ab der 2. Zeile

FaFoo

Schau doch mal in den Quelltext und ruf die CSS-Dateien im Browser auf oder schau mit firebug.

synaptic

Code

<style type="text/css">


.outer {
position:relative;
padding:4em 0 3em 0;
width:54em;
background:#eee;
margin:0 auto 3em auto;
}
.innera {
overflow:auto;
width:54em;
height:9.6em;
background:#eee;
}
.outer table caption {
position:absolute;
width:51.7em;
text-align:center;
top:0;
left:0;
height:1.5em;
background:#697210;
border:0.1em solid #fff;
color:#fff;
}
.outer thead tr {
position:absolute;
top:1.5em;
height:1.5em;
left:0;
}
.outer tfoot td {
position:absolute;
width:51.5em;
text-align:center;
background:#f0c992; 
border:0.1em solid #000;
color:#000;
bottom:0;
left:0
}
.outer th, .outer td {
width:10em; 
text-align:left;
}
.outer th {
background:#724a10; 
color:#fff;}
.outer .dk {background:#fff;
}


.tableone {width:650px; border-collapse:collapse; margin:0 auto;}
.tabletwo {width:620px; border-collapse:collapse;}
.th1 {width:149px;}
.th2 {width:99px;}
.th3 {width:99px;}
.th4 {width:99px;}
.th5 {width:200px;}


.td1 {width:149px;}
.td2 {width:99px;}
.td3 {width:99px;}
.td4 {width:99px;}
.td5 {width:170px;}


.tableone {background:#697210; border:1px solid #fff; color:#fff;}
.tableone td {border:1px solid #fff; color:#fff;}
.tableone tbody {background:#f0c992; color:#000;}
.tableone caption {background:#fff; color:#697210; font-size:1.2em; margin:0 auto;}
.tabletwo td {background:#eee; color:#000;}
.tableone th, .tabletwo th {text-align:left;}
.tabletwo tr.dk td {background:#ddd; color:#000;}


.innerb {height:10em; overflow:auto;}




</style>

Alles anzeigen

eb-stefan

Sieht bei mir zur Zeit so aus.
Ich kann den Fehler nicht finden
bin auch nicht so der CSS experte

synaptic

sieht doch geil aus :D:D
spass beiseite.. haste des schon irgendwo hochgeladen?
zur not klau von dem link oben mal den kompletten quellcode und dann machste alles nach nd nach weg, bis du die tabelle hast, wie du sie haben wolltest

also ich hab mir den kram beim link net genau angesehen, nur für dich den scheinbar zuständigen css-code ausm firebug kopiert..

für mich sieht des ding da so aus, als hättest du ne tabelle machstganz normal deine tableheaderdann in der nächsten zeile machste nen colspan über alle tabellenzellen und packst da dann nen div rein mit festen werten und overflow: scroll;
und in dieses div machste dann ne neue tabelle..
ich guck ma eben ob des so funzt wie ich grad denke

eb-stefan

ok Danke,
das problem ist ich hab nicht wirklich viel ahnung davon und dann kommt noch dazu das dass ganze in php mit einem html generator aufgebaut ist und alles total verschachtelt....

Ich muss da mal ganz in ruhe step by step durchgehen....

synaptic

also was ich jetzt da habe sieht nich ganz so geil aus und muss auch stylemässig bestimmt angepasst werden

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">


<html>
<head>
    <title>Untitled</title>
    <style type="text/css">
    .outertable{
    border:1px ridge black;
    }
    th{
    border:1px ridge black;
    width:90px;
    }
    .cell{
    display:block;
    width:100px;
    padding-left:5px;
    }
    #innerdiv{
    width:100%;
    height:100px;
    overflow:scroll;
    }
    .center{
    margin:0 auto;
    }
    </style>
</head>


<body>
<table class="outertable">
<tr>
<th>1 feld</th>
<th>2 feld</th>
<th>3 feld</th>
<th>4 feld</th>
<th>5 feld</th>
<th style="width:10px;">&nbsp;</th>
</tr>
<tr>
<td colspan="6">
<div id="innerdiv">
<table class="center">
<tr>
<td class="cell">1 feld drinnen</td>
<td class="cell">2 feld drinnen</td>
<td class="cell">3 feld drinnen</td>
<td class="cell">4 feld drinnen</td>
<td class="cell">5 feld drinnen</td>
</tr>
<tr>
<td class="cell">1 feld drinnen</td>
<td class="cell">2 feld drinnen</td>
<td class="cell">3 feld drinnen</td>
<td class="cell">4 feld drinnen</td>
<td class="cell">5 feld drinnen</td>
</tr>
<tr>
<td class="cell">1 feld drinnen</td>
<td class="cell">2 feld drinnen</td>
<td class="cell">3 feld drinnen</td>
<td class="cell">4 feld drinnen</td>
<td class="cell">5 feld drinnen</td>
</tr>
<tr>
<td class="cell">1 feld drinnen</td>
<td class="cell">2 feld drinnen</td>
<td class="cell">3 feld drinnen</td>
<td class="cell">4 feld drinnen</td>
<td class="cell">5 feld drinnen</td>
</tr>
<tr>
<td class="cell">1 feld drinnen</td>
<td class="cell">2 feld drinnen</td>
<td class="cell">3 feld drinnen</td>
<td class="cell">4 feld drinnen</td>
<td class="cell">5 feld drinnen</td>
</tr>
<tr>
<td class="cell">1 feld drinnen</td>
<td class="cell">2 feld drinnen</td>
<td class="cell">3 feld drinnen</td>
<td class="cell">4 feld drinnen</td>
<td class="cell">5 feld drinnen</td>
</tr>
</table>
</div>
</td>
</tr>
</table>




</body>
</html>

Alles anzeigen

aber das sieht dem ergebnis auf der einen page schon recht ähnlich...
wie gesagt ich hab des jetzt vom eindruck den ich bekommen hatte rekonstruiert...
kannst dir das ja wenn du meine version verstanden hast nochmal auf der verlinkten seite angucken und parallelen suchen.
hoffe es hilft weiter

eb-stefan

Also ich komm langsam weiter
ich ab es schonmal das ich scrollen kann und so.. klappt

jedoch passen die überschriften nicht zum Inhalt.
zwar ist beides gleich breit aber es passt halt nicht

hat jemand ne idee?
das problem ist die anzahl der spalten ist variabel

eb-stefan

keiner eine idee?

Tags