HTML Frage, erste Spalte und Zeile in Tabelle fixieren

[Domi83]

Hallo Leute, ich habe mal eine Frage und suche keinen Google oder Wiki Link. Fünf Jahre (und mehr) alte Themen habe ich schon selbst gefunden.

Hat schon einmal jemand von Euch mit den aktuell gegebenen Techniken, eine Ausgabe von einer Statistik in HTML mit CSS erstellt, in der (wie in Excel) die erste Spalte und Zeile fixiert sind, oder geht dieses gar nicht?

Chef möchte gerne eine statistische Ausgabe erstellt haben, diese ist allerdings breiter als es der Monitor her gibt und somit muss er nach oben / unten und links / rechts scrollen. Für diesen Fall würde ich allerdings ganz gerne (wie erwähnt), die erste Zeile und Spalte fixieren.

Ich hatte einige Themen dazu gefunden, von 2009 wo man dann auch erwähnte das es mit HTML und CSS nicht möglich ist. Aber in fünf Jahren geht die Technik auch mal voran und nun wollte ich von Euch wissen ob Ihr so etwas schon einmal realisiert habt. Suche ich allerdings aktuellere Themen, bekomme ich sehr oft die Frage wie man dies in Excel realisiert, was aber nicht meine Frage ist... denn da weiß ich wie es geht

Gruß, Domi

 

[apnotix]

Ich denke mal die erste Spalte und die erste Zeile sollen als Überschriften dienen oder?

Könntest es so machen, dass es eine Tabelle in einer Tabelle ist und die innere nur mit den Werten füllen und scrollbar machen.
Die äußere ist somit dann fixiert, weil dort sich der inhalt ja nicht ändert.

Mit der CSS Eigenschaft "overflow" würd ich mich in diesem Fall dann noch beschäftigen.

 

[Daaron]

Am <table>-Element hat sich seit locker 10 Jahren nichts geändert.
Deine beste Chance könnte sein, den <thead> mit display:fixed oben anzupinnen und mit tr td:first-child {display:fixed} die ersten Zellen jeder Zeile ebenfalls aus dem Fluß zu reißen. Das KÖNNTE gehen, aber keine Garantie... Außerdem ist Fixed-Elemente immer gegenüber dem Browser Viewport fixiert, nicht gegen das Elternelement.

 

[Domi83]

Moin moin... Ich bedanke mir schon mal für die echt schnellen Rückmeldungen. Ich probiere beide Varianten einmal aus und versuche sie durch. Wenn ich mit einer der beiden Varianten an ein Ziel gekommen bin, teile ich Euch das mit

Das wird sowieso eine spaßige Geschichte, zumal ich die PHP und SQL Abfrage noch optimieren muss. Aktuell ist das alles sehr Monolog und "old-school", aber dafür mache ich dann noch ein anderes Topic auf.

Gruß, Domi

 

[Daaron]

Funktioniert es? Hat es keine Sicherheitslücken (z.B. SQL Injection)? Ist es halbwegs erweiterbar? Dann optimier es nicht.

 

[Schwenni]

hier trotzdem ein link

http://www.imaputz.com/cssStuff/bigFourVersion.html

 

[Domi83]

Hallo Schwenni, danke für den Link. Das werde ich mir mal anschauen. Zumindest kann ich damit die erste Zeile fixieren

@Daaron, ne ne.. es ist aus meiner Sicht viel Schlimmer. Ich habe in einer SQL Datenbank verschiedene Versicherer aufgelistet, zu jedem Versicherer gibt es pro Tag unterschiedliche viele Buchungen. Nun muss ich also eine Tabelle erstellen die sich je nach Anzahl der Versicherer (kann mal einer mehr oder weniger werden), <td> Technisch erweitert und die <tr> erweitern sich anhand der Daten (Datum) in der Datenbank.

Ein Beispiel habe ich jetzt einmal als Bild beigefügt.
Gruß, Domi

p.s. Jede abgeschlossene Versicherung wird einzeln in der Datenbank erfasst. Das wäre dann der PHP Teil

 

[T0a5tbr0t]

Im neusten Firefox und Safari gibt es position: sticky im CSS. Ich glaube das funktioniert aber nur beim vertikalen scrollen.
http://caniuse.com/#feat=css-sticky
In anderen Browsern braucht man da JavaScript. Die Chrome Entwickler haben position: sticky sogar aus ihrem Webkit-Fork rausgepatcht
position: fixed geht nicht, da die Header ja mit scrollen sollen, aber nur in eine Richtung.

 

[Daaron]

Am Ende geht ja eh nix über Responsive Tables, bei denen man mit data-Attributen und ::before Content arbeitet... Besser als Scrollen isses allemal.

 

[mambokurt]

Hat schon einmal jemand von Euch mit den aktuell gegebenen Techniken, eine Ausgabe von einer Statistik in HTML mit CSS erstellt, in der (wie in Excel) die erste Spalte und Zeile fixiert sind, oder geht dieses gar nicht?

Ich habs zwei oder drei mal probiert, wenn hat es aber immer nur mit Spalten fester Breite funktioniert, weil du quasi Head und Body in unterschiedliche Tabellen steckst (hatte ich jedenfalls so gemacht), sprich die Spalten im Head wachsen nicht dynamisch mit. Wenn du dann noch die erste Spalte fixieren willst: viel Spaß

Davon ab: überleg dir die ganze Geschichte vielleicht direkt nach Excel zu schieben? Dürfte bei vielen Einträgen performanter reagieren als der Browser und dein Chef kann gleich noch Diagramme erstellen. Dazu kannst du entweder einje Excel Klasse nutzen oder (in deinem Fall wahrscheinlich easier) die Daten einfach als CSV an Excel rübergeben.

Ergänzung (6. September 2014)

Ich habe in einer SQL Datenbank verschiedene Versicherer aufgelistet, zu jedem Versicherer gibt es pro Tag unterschiedliche viele Buchungen. Nun muss ich also eine Tabelle erstellen die sich je nach Anzahl der Versicherer (kann mal einer mehr oder weniger werden), <td> Technisch erweitert und die <tr> erweitern sich anhand der Daten (Datum) in der Datenbank.

Soo schlimm ist das nun auch nicht:

//du bekommst ein Ergebnis aus der Datenbank mit Name Versicherer, Datum, Betrag, ich gehe mal davon aus dass datum ein Unixtimestamp ist
$data = array(); //die Tabellendaten
$versicherer = array(); //alle Versicherer
while($row =  $sth->fetch(PDO::FETCH_ASSOC)) {
  if(isset($data[$row['versicherer']][$row['datum']])) { //zu dem Versicherer an dem Tag gibt es schon einen Eintrag, aufsummieren
    $data[$row['datum']][$row['versicherer']] += $row['betrag'];
  } else {
    $data[$row['datum']][$row['versicherer']] = $row['betrag']; //erster Betrag zu dem Versicherer und dem Tag 
  }
  $versicherer[$row['versicherer']] = $row['versicherer'];
}
//hübsch sortieren
ksort($versicherer);
ksort($data); //wenn du 'echte' Datumsangaben a la 12.03.2012 als Datum hast, funktioniert das nicht, dann kannst du aber oben in der while einen Timestamp daraus machen, dann sortiert dir das ksort das schön chronologisch hin

$out = ''; // String für die Tabelle
//Tabellenkopf bauen
$out .= '<table><thead><tr><th>Datum/Versicherer</th><th>'.implode('</th><th>', $versicherer).'</th></tr></thead><tbody>'; 

//jetzt brauchst du nur per foreach die ganze Geschichte durchgehen und anhängen

foreach($data as $datum => $nachVersicherer) {
 $out .= '<tr><th>'.date('d.m.Y', $datum).'</th>'; //erste Spalte -> Datum
 foreach($versicherer as $name) { //alle möglichen Versicherer durchgehen
   if(isset($nachVersicherer[$name])) {
     $out .= '<td>'.$nachVersicherer[$name].'</td>';
   } else {
     $out .= '<td>0</td>';
   }
 }
 $out .= '</tr>';
}
$out .= '</tbody></table>';

Übrigens kann Excel auch HTML Tabellen öffnen,

header("Content-type: application/vnd.ms-excel");
header("Content-Disposition: attachment; filename=$file");
echo $out;

Das gibt allerdings in modernen Excelversionen eine Warnung. Wenn du das nicht willst, kannst du natürlich auch statt eine Tabelle zusammenzubauen das oben leicht abändern und eine CSV zusammensetzen udn nach Excel geben, das sollte auch klappen...

 

[Domi83]

Hallo mambokurt, vielen vielen Dank für dein Beispiel

Auf solch einen Ansatz wäre ich im Leben nicht gekommen. Aber damit hast Du mir gezeigt wie man es bauen kann. Das werde ich mir auch gleich als Vorlage an die Seite legen, da ich für unsere Telefonstatistik eine ähnliche Tabelle habe. Allerdings habe ich da ganz viele SQL Abfragen verschachtelt (zum Abfragen und berechnen) und bis die Seite geladen ist, können dann locker 5 - 10 Sekunden vergehen.

Aber mit diesem Aufbau kann ich etwas anfangen, den umbauen, erweitern etc.

Gruß, Domi

 

[mambokurt]

Kein Problem.

Verschachtelte Abfragen sind allgemein eher langsam, wenn du Zeit sparen willst hol so viel wie möglich vorneweg ab und stopf es in ein großes Array, das frisst zwar mehr Ram, dafür läuft es im allgemeinen aber sehr viel schneller. Kommt natürlich auf deine Daten an, wenn es soweit ist und es wird zu langsam kannst du ja hier nochmal fragen

 

[Domi83]

Joa, werde ich tun. Ich habe bis dato immer alles über MySQL versucht zu lösen. Da ich sonst keine großen Daten abrufen musste, ging das immer sehr gut, indem ich über eine Methode und einer ID einfach gesagt habe das er mir die Daten von X, Y und Z laden soll.

PHP array sind für mich irgendwie immer ein Mysterium gewesen... und sie sind es aktuell immer noch, aber wenn es dann wirklich langsam werden sollte, melden ich mich

Gruß, Domi