Kleiner Kampf mit fixierter erster Zeile in Tabelle

sysop · 12 März 2013

Hallo

Für die Ausgabe einer Statistik spiele ich gerade mit Tabellenmöglichkeiten herum. Also, die erste Zeile soll fixiert werden und der Rest der Tabelle soll scrollbar sein. Soweit ja kein Problem.

Nun will ich nicht einfach nur die erste Zeile einer Tabelle fixieren, sondern das ganze auch korrekt ausgeben, sprich die Spalten in Überschrift und Wertebereich in korrekter (gleicher) Breite, was mir schlicht nicht gelingen mag.
Zum Einen stellen die getesteten Browser (Firefox, Midori, ie, Opera) die Spalten in unterschiedlicher Breite da, zum Anderen verstehe ich die Pixel-Abweichungen von thead und tbody nicht.
Der gepostete Code zeigt mir auf einem Debian im Firefox die Spalten 100% korrekt an. Sehe ich mir die Angaben zur Spaltenbreite für Überschrift und Wertebereich an, wird mir übel.
Spalte 1: 140px im Kopfbereich stehen 142px im Wertebereich gegenüber
Spalte 2: 40px im Kopf zu 42px im Wetrtebereich
Spalte 3 240px Kopf zu 242 im Wertebereich
u.s.w

Firefox will also im Wertebereich ständig 2px mehr als im Kopfbereich.
Opera will das wieder ganz anders, der ie ist zum Knicken, wie immer....
Mit der Tatsache dass es einfach nicht will habe ich mich abgefunden, nur würde mich interessieren, WARUM.
Die theoretische Möglichkeit die erste Zeile zu fixieren verliert ihren Reiz, wenn ich für jeden Browser eine eigene CSS-Datei machen muss. Erschwert wird das Ganze noch dadurch, dass ich die Anzahl an Spalten aus der Datenbank auslese und natürlich automatisiert eine Tabelle erstelle. Also eine Funktion für alle Tabellen.

Zuerst der Code (der Einfachheit nur eine Zeile Ergebnisse):

HTML:

<table class="tbloview"> 
<thead style="height:24px; display:block;">
 <tr>
  <td class="thsmall" style="width:140px;"><a href="/inventar/templates/admin/ad_statistik.php?what=2&amp;sort=DESC&amp;field=timestamp" title="aufsteigend">timestamp</a>&nbsp;<img src="img/desc.png" alt="DESC"></td>
  <td class="thsmall" style="width:40px;"><a href="/inventar/templates/admin/ad_statistik.php?what=2&amp;sort=DESC&amp;field=adr_id" title="ID">ID</a>&nbsp;<img src="img/spacer.png" alt="DESC"></td>
  <td class="thsmall" style="width:240px;"><a href="/inventar/templates/admin/ad_statistik.php?what=2&amp;sort=DESC&amp;field=user_id" title="Geh&ouml;rt">Bearbeitet von</a>&nbsp;<img src="img/spacer.png" alt="DESC"></td>
  <td class="thsmall" style="width:39px;"><a href="/inventar/templates/admin/ad_statistik.php?what=2&amp;sort=DESC&amp;field=edit" title="Edit">Edit</a>&nbsp;<img src="img/spacer.png" alt="DESC"></td>
  <td class="thsmall" style="width:40px;"><a href="/inventar/templates/admin/ad_statistik.php?what=2&amp;sort=DESC&amp;field=kill" title="">kill</a>&nbsp;<img src="img/spacer.png" alt="DESC"></td>
  <td class="thsmall" style="width:40px;"><a href="/inventar/templates/admin/ad_statistik.php?what=2&amp;sort=DESC&amp;field=new" title="Neu">Neu</a>&nbsp;<img src="img/spacer.png" alt="DESC"></td>
  <td class="thsmall" style="width:359px;"><a href="/inventar/templates/admin/ad_statistik.php?what=2&amp;sort=DESC&amp;field=info" title="">info</a>&nbsp;<img src="img/spacer.png" alt="DESC"></td> 
</tr> 
</thead> 
<tbody style="height: 400px; overflow: scroll; display: block;"> 
<tr class="td2ov" onmouseover="this.className='over'" onmouseout="this.className='td2ov'">
  <td class="top" align="left" style="width:142px; font-weight:bold;"><span class="tsmall">11.03.2013 [14:54]&nbsp;</span></td>
  <td class="top" align="right" style="width:42px;"><span class="tsmall">58&nbsp;</span></td>
  <td class="top" align="left" style="width:242px;"><span class="tsmall">Rechner Fred</span></td>
  <td class="top" align="left" style="width:42px;"><span class="tsmall">&nbsp;</span></td>
  <td class="top" align="left" style="width:42px;"><span class="tsmall">&nbsp;</span></td>
  <td class="top" align="right" style="width:42px;"><span class="tsmall">2&nbsp;</span></td>
  <td class="top" align="left" style="width:362px;"><span class="tsmall"><span style="color:red; font-weight:bold;">Neu</span><br><b>monat</b>3<br><b>tag</b>18<br><b>stunde</b>13<br><b>minute</b>30<br><b>Termin</b> 1363609800<br><b>id</b>58<br><b>Info-Text</b> <p>Treffen TripsTrüTralala</p>&nbsp;</span></td> 
</tr>
</tbody>
</table>

Dass sich bitte niemand wundert, die align Angaben kommen daher, dass die Klasse testet, ob es sich um nummerische Werte handelt oder nicht und entsprechend rechts ausrichtet.

Was kann ich nun noch tun, um die Spaltenbreiten auf eine gemeinsame Einheit zu bringen. Alle Ergebnisse bei Google die mit thead und tbody arbeiten und die erste Zeile fixieren sehen grauslich aus und haben das selbe Problem wie ich.
CSS-Ideen?

XraYSoLo · 12 März 2013

Zeigtst du uns mal bitte den Rest vom Markup und die CSS-Datei?

Nils aka XraYSoLo

sysop · 12 März 2013

Ich spiele ja noch rum.

Code:

.tbloview
{#main_no_navi
{
   margin-top                                           : 1em;
   padding                                              : 1em;
   border                                               : 1px solid #999999;
   background-color                                     : white;
   margin-bottom                                        : 0.5em;
   font-size                                            : 8pt;
   font-family                                          : sans-serif;
   text-decoration                                      : none;
   clear                                                : both;
   min-height                                           : 506px;
}

   border-spacing                                       : 1px;
}

td.thsmall
{
   background-color                                     : silver;
   font-family                                          : verdana;
   font-size                                            : 8pt;
   font-weight                                          : bold;
   color                                                : black;
   vertical-align                                       : top;
   padding                                              : 0.2em;
}

.td2ov
{
   background-color                                     : #F2DFE1;
   font-family                                          : verdana;
   font-size                                            : 10pt;
   font-weight                                          : normal;
   color                                                : blue;
}

.over
{
   background-color                                     : yellow;
   font-family                                          : verdana;
   font-size                                            : 10pt;
   font-weight                                          : normal;
   color                                                : black;
}

.top
{
   vertical-align                                       : top;
}

.tsmall
{
   font-size                                            : 12px;
   color                                                : black;
}

#main_no_navi
{
   margin-top                                           : 1em;
   padding                                              : 1em;
   border                                               : 1px solid #999999;
   background-color                                     : white;
   margin-bottom                                        : 0.5em;
   font-size                                            : 8pt;
   font-family                                          : sans-serif;
   text-decoration                                      : none;
   clear                                                : both;
   min-height                                           : 506px;
}

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" href="../../styles/style.css" type="text/css">
  <link rel="Shortcut Icon" href="logo.jpg">
  <title>Statistik</title>
</head>
<body>
<div id="main_no_navi">
Statistik&nbsp;auswerten<br>
<br>
<b>Termine</b><br>
<br>

<table class="tbloview">
<thead style="height:24px; display:block;">
 <tr>
  <td class="thsmall" style="width:140px;"><a href="/inventar/templates/admin/ad_statistik.php?what=2&amp;sort=DESC&amp;field=timestamp" title="aufsteigend">timestamp</a>&nbsp;<img src="img/desc.png" alt="DESC"></td>
  <td class="thsmall" style="width:40px;"><a href="/inventar/templates/admin/ad_statistik.php?what=2&amp;sort=DESC&amp;field=adr_id" title="ID">ID</a>&nbsp;<img src="img/spacer.png" alt="DESC"></td>
  <td class="thsmall" style="width:240px;"><a href="/inventar/templates/admin/ad_statistik.php?what=2&amp;sort=DESC&amp;field=user_id" title="Geh&ouml;rt">Bearbeitet von</a>&nbsp;<img src="img/spacer.png" alt="DESC"></td>
  <td class="thsmall" style="width:39px;"><a href="/inventar/templates/admin/ad_statistik.php?what=2&amp;sort=DESC&amp;field=edit" title="Edit">Edit</a>&nbsp;<img src="img/spacer.png" alt="DESC"></td>
  <td class="thsmall" style="width:40px;"><a href="/inventar/templates/admin/ad_statistik.php?what=2&amp;sort=DESC&amp;field=kill" title="">kill</a>&nbsp;<img src="img/spacer.png" alt="DESC"></td>
  <td class="thsmall" style="width:40px;"><a href="/inventar/templates/admin/ad_statistik.php?what=2&amp;sort=DESC&amp;field=new" title="Neu">Neu</a>&nbsp;<img src="img/spacer.png" alt="DESC"></td>
  <td class="thsmall" style="width:359px;"><a href="/inventar/templates/admin/ad_statistik.php?what=2&amp;sort=DESC&amp;field=info" title="">info</a>&nbsp;<img src="img/spacer.png" alt="DESC"></td>
</tr>
</thead>
<tbody style="height: 400px; overflow: scroll; display: block;">
<tr class="td2ov" onmouseover="this.className='over'" onmouseout="this.className='td2ov'">
  <td class="top" align="left" style="width:142px; font-weight:bold;"><span class="tsmall">11.03.2013 [14:54]&nbsp;</span></td>
  <td class="top" align="right" style="width:42px;"><span class="tsmall">58&nbsp;</span></td>
  <td class="top" align="left" style="width:242px;"><span class="tsmall">Rechner Fred</span></td>
  <td class="top" align="left" style="width:42px;"><span class="tsmall">&nbsp;</span></td>
  <td class="top" align="left" style="width:42px;"><span class="tsmall">&nbsp;</span></td>
  <td class="top" align="right" style="width:42px;"><span class="tsmall">2&nbsp;</span></td>
  <td class="top" align="left" style="width:362px;"><span class="tsmall"><span style="color:red; font-weight:bold;">Neu</span><br><b>monat</b>3<br><b>tag</b>18<br><b>stunde</b>13<br><b>minute</b>30<br><b>Termin</b> 1363609800<br><b>id</b>58<br><b>Info-Text</b> <p>Treffen TripsTrüTralala</p>&nbsp;</span></td>
</tr>
<tr class="td2ov" onmouseover="this.className='over'" onmouseout="this.className='td2ov'">
  <td class="top" align="left" style="width:142px;  font-weight:bold;"><span class="tsmall">11.03.2013  [14:54]&nbsp;</span></td>
  <td class="top" align="right" style="width:42px;"><span class="tsmall">58&nbsp;</span></td>
  <td class="top" align="left" style="width:242px;"><span class="tsmall">Rechner Fred</span></td>
  <td class="top" align="left" style="width:42px;"><span class="tsmall">&nbsp;</span></td>
  <td class="top" align="left" style="width:42px;"><span class="tsmall">&nbsp;</span></td>
  <td class="top" align="right" style="width:42px;"><span class="tsmall">2&nbsp;</span></td>
  <td class="top" align="left" style="width:362px;"><span  class="tsmall"><span style="color:red;  font-weight:bold;">Neu</span><br><b>monat</b>3<br><b>tag</b>18<br><b>stunde</b>13<br><b>minute</b>30<br><b>Termin</b>   1363609800<br><b>id</b>58<br><b>Info-Text</b>  <p>Treffen  TripsTrüTralala</p>&nbsp;</span></td>
</tr>
<tr class="td2ov" onmouseover="this.className='over'" onmouseout="this.className='td2ov'">
  <td class="top" align="left" style="width:142px;  font-weight:bold;"><span class="tsmall">11.03.2013  [14:54]&nbsp;</span></td>
  <td class="top" align="right" style="width:42px;"><span class="tsmall">58&nbsp;</span></td>
  <td class="top" align="left" style="width:242px;"><span class="tsmall">Rechner Fred</span></td>
  <td class="top" align="left" style="width:42px;"><span class="tsmall">&nbsp;</span></td>
  <td class="top" align="left" style="width:42px;"><span class="tsmall">&nbsp;</span></td>
  <td class="top" align="right" style="width:42px;"><span class="tsmall">2&nbsp;</span></td>
  <td class="top" align="left" style="width:362px;"><span  class="tsmall"><span style="color:red;  font-weight:bold;">Neu</span><br><b>monat</b>3<br><b>tag</b>18<br><b>stunde</b>13<br><b>minute</b>30<br><b>Termin</b>   1363609800<br><b>id</b>58<br><b>Info-Text</b>  <p>Treffen  TripsTrüTralala</p>&nbsp;</span></td>
</tr>
<tr class="td2ov" onmouseover="this.className='over'" onmouseout="this.className='td2ov'">
  <td class="top" align="left" style="width:142px;  font-weight:bold;"><span class="tsmall">11.03.2013  [14:54]&nbsp;</span></td>
  <td class="top" align="right" style="width:42px;"><span class="tsmall">58&nbsp;</span></td>
  <td class="top" align="left" style="width:242px;"><span class="tsmall">Rechner Fred</span></td>
  <td class="top" align="left" style="width:42px;"><span class="tsmall">&nbsp;</span></td>
  <td class="top" align="left" style="width:42px;"><span class="tsmall">&nbsp;</span></td>
  <td class="top" align="right" style="width:42px;"><span class="tsmall">2&nbsp;</span></td>
  <td class="top" align="left" style="width:362px;"><span  class="tsmall"><span style="color:red;  font-weight:bold;">Neu</span><br><b>monat</b>3<br><b>tag</b>18<br><b>stunde</b>13<br><b>minute</b>30<br><b>Termin</b>   1363609800<br><b>id</b>58<br><b>Info-Text</b>  <p>Treffen  TripsTrüTralala</p>&nbsp;</span></td>
</tr>
<tr class="td2ov" onmouseover="this.className='over'" onmouseout="this.className='td2ov'">
  <td class="top" align="left" style="width:142px;  font-weight:bold;"><span class="tsmall">11.03.2013  [14:54]&nbsp;</span></td>
  <td class="top" align="right" style="width:42px;"><span class="tsmall">58&nbsp;</span></td>
  <td class="top" align="left" style="width:242px;"><span class="tsmall">Rechner Fred</span></td>
  <td class="top" align="left" style="width:42px;"><span class="tsmall">&nbsp;</span></td>
  <td class="top" align="left" style="width:42px;"><span class="tsmall">&nbsp;</span></td>
  <td class="top" align="right" style="width:42px;"><span class="tsmall">2&nbsp;</span></td>
  <td class="top" align="left" style="width:362px;"><span  class="tsmall"><span style="color:red;  font-weight:bold;">Neu</span><br><b>monat</b>3<br><b>tag</b>18<br><b>stunde</b>13<br><b>minute</b>30<br><b>Termin</b>   1363609800<br><b>id</b>58<br><b>Info-Text</b>  <p>Treffen  TripsTrüTralala</p>&nbsp;</span></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

scbawik · 12 März 2013

Also ich suche auch schon seit Wochen vergeblich nach einer passablen Lösung für dieses Problem.

Keine der 'hochgelobten' Lösungen funktioniert dann noch so, wie eine Tabelle funktionieren sollte. Dann kann man es gleich mit DIV's machen. Etwas anderes machen die 'Lösungen' ja auch nicht aus der Tabelle.

Wenn man sich beispielsweise die Tabellen von 'großen' Web-Apps ansieht, wie bspw. Google Analytics/Webmaster-Tools. Oder phpMyAdmin. Oder ... mir fällt gerade nicht mehr ein. Alle diese fügen entweder die Kopfzeile immer wieder alle paar Einträge ein, oder die Kopfzeile bleibt nicht fixiert und man muss die gesamte Seite scrollen.

Ich denke diese hätten das schon lange besser gelöst, wenn es nur gehen würde.

Auch scheint es noch keine Lösung zu geben die nur in ganz aktuellen Browser-Versionen funktioniert.

Das ist sehr ... traurig, würde ich schon fast sagen, wenn man bedenkt dass wir dafür wohl mindestens auf die nächste Html/CSS-Generation warten müssen.

Sollte doch jemand eine Lösung haben, würde ich mich ebenfalls sehr freuen.

Edit:
Da ich überzeugt bin, dass es keine CSS-basierte Lösung dafür gibt, sollte es doch eigentlich möglich sein, per JavaScript das was sonst der Browser macht (also die Breite jeder Zelle dynamisch zu bestimmen) zu reproduzieren. Allerdings denke ich dass die Performance nicht so optimal sein wird. Falls ich dazu komme, werde ich es diese Woche mal probieren.

threadi · 12 März 2013

Ich verwende diese Lösung hier:
Pure CSS Scrollable Table with Fixed Header

Wurde übrigens auch in diesem Forum schon besprochen:
http://www.html.de/html-und-xhtml/42262-html-tabelle-kopfzeile-fixieren.html#post304663

scbawik · 13 März 2013

Ja, die variable Zellenbreite fällt bei dieser Lösung allerdings weg.

Wie auch beim letzten Post im verlinkten Forum geschrieben.

sysop · 13 März 2013

threadi schrieb:
Ich verwende diese Lösung hier:
Pure CSS Scrollable Table with Fixed Header

Ja, aber auch da fällt das geschilderte Problem auf. Die Spalten der Überschrift sind nicht bündig mit den Spalten des Wertebereichs.
So bekomme ich es ja auch hin. Sieht allerdings furchtbar aus.

threadi schrieb:
Ich verwende diese Lösung hier:
Wurde übrigens auch in diesem Forum schon besprochen:
http://www.html.de/html-und-xhtml/42262-html-tabelle-kopfzeile-fixieren.html#post304663

Das habe ich auch gelesen, aber der Themenersteller bekommt/bekam das ja garnicht hin.
Ich hingegen möchte ja eine saubere Lösung (Darum in der Kat CSS).

threadi · 13 März 2013

Nicht bündig? Das oben verlinkte Beispiel ist bei mir bündig. Wie sieht denn dein Quellcode dazu aus? Der Screenshot wirkt so als wären die Tabellenzellen drunter nicht komplett im HTML-Code angegeben.

sysop · 14 März 2013

Hi

Der Code ist genau der, aus meinem dritten Posting, 1 zu 1 übernommen.

Wie gesagt, wird die Lösung mit jedem Browser (wahrscheinlich auch unter jedem OS) etwas anders angezeigt und die Abweichungen sind relativ gering.
Trotzdem ist das eine unsaubere Lösung, wenn Browser da mitmischen können, obwohl ich Punktgenau die Breite angebe.
Relative Spaltenbreiten sind auch nicht möglich, schade eigentlich, das wäre mal eine tolle Sache gewesen.

Dein verlinktes Beispiel sieht bei mir so aus und kommt auf das Gleiche raus wie bei mir...

scbawik · 14 März 2013

Sorry threadi, so gut es auch gemeint sein mag, aber deine Lösung ist einfach nicht zu gebrauchen.
Zumindest wenn man gewisse Ansprüche, wie etwa eine variabel Spaltenbreite, hat.

@sysop:
Hast du eventuell einen relativ neuen Mac?
Ich habe zu Hause auch einen neuen. Dieser hat generell keine Scrollbalken mehr. Dadurch kommt die Verschiebung bei dieser Methode zustande.

Sieht man auch wenn man per Firebug die Scrollarea auf overflow:hidden; stellt.

sysop · 14 März 2013

Mac :shock:
Ich bin bekennender Debianer (Wheezy) ;heart

scbawik · 14 März 2013

Dann musst du dich auch nicht wundern wenn nichts funktioniert *duck und weg*

threadi · 14 März 2013

scbawik schrieb:
Sorry threadi, so gut es auch gemeint sein mag, aber deine Lösung ist einfach nicht zu gebrauchen.
Zumindest wenn man gewisse Ansprüche, wie etwa eine variabel Spaltenbreite, hat.

Zugegeben, guter Punkt. Ich brauchte das bisher (noch) nicht.

scbawik schrieb:
Dann musst du dich auch nicht wundern wenn nichts funktioniert *duck und weg*

Distributionen können nichts für die Darstellung von Webseiten. Wenn man sich mal auf die Scrollbalken-Sache beschränkt, könnte ja die Oberfläche noch ein Argument sein: KDE oder Gnome, je nachdem welches Design etc.pp. Aber Debian kann nichts dafür :)

sysop · 14 März 2013

Debian ist Wheezy mit Firefox 19.0.2. Opera macht die selben Männchen, nur dass ich dort nicht um 2px vergrössern, sondern verkleinern muss. Midori macht wie der FF
Ich denke auch, dass es am FF und seinem Scrollbalken liegt.

scbawik · 15 März 2013

threadi schrieb:
Distributionen können nichts für die Darstellung von Webseiten. Wenn man sich mal auf die Scrollbalken-Sache beschränkt, könnte ja die Oberfläche noch ein Argument sein: KDE oder Gnome, je nachdem welches Design etc.pp. Aber Debian kann nichts dafür :)

Weiß ich doch, wollte nur den sysop ein bisschen sticheln :)

Also sind wir uns jetzt aber einig - es gibt keine Allrounder-Lösung?
Würde mich nämlich schon freuen wenn jemand noch etwas auf Lager hat.

sysop · 15 März 2013

Bin gerade drann, tue mir aber ein bisschen schwer, mit der Berechnung der Spaltenbreiten, ob meine Idee funktioniert, werde ich sehen.

Mein Vorhaben:
die Spaltenbreite für den breitesten Eintrag je Spalte vor der Ausgabe zu errechnen und dann auf Kopf und Wertebereich anzuwenden.

djheke · 16 März 2013

Hier mal ein CSS Experiment. Vielleicht kannst du was gebrauchen. In welchen Browsern, außer FF, es noch funktioniert. Keine Ahnung. Du musst nur darauf achten, dass die Titeltexte nicht länger sind als die jeweilige Spalte(da absolut positioniert wurde)
Responsive

sysop · 18 März 2013

Hi

Danke, ich sehe mir das mal an, dass sieht doch schon ganz gut aus

scbawik · 20 März 2013

Sieht wirklich ganz ok aus. Perfekt finde ich die Lösung allerdings noch nicht. Auch fehlt eine dynamische Breite.
Trotzdem Danke!

Ich habe mich aktuell an einer jQuery-Lösung versucht.
Leider musste ich feststellen dass aufgrund der Performance (Berechnung der Spaltenbreiten) und den ganzen Einstellungsmöglichkeiten, die ein solches Plugin bieten müsste, keine Realisierung in kurzer Zeit möglich ist. Möglich ist es aber!

Mit dem aktuellen Stand meines Plugins werden alle Zellenbreiten analysiert und per jQuery gesetzt. Soweit funktioniert es ganz gut, allerdings bei mehr als 800 Zeilen stürzen die Browser ab während der Berechnung. Auch bei weniger Zeilen, ist ein kleiner 'Freeze' spürbar.

Allerdings werde ich, wenn ich Zeit finde, nochmal von vorne beginnen. Vielleicht wird's dann was.

djheke · 20 März 2013

scbawik schrieb:
Sieht wirklich ganz ok aus.

Danke.

scbawik schrieb:
Perfekt finde ich die Lösung allerdings noch nicht.

Solche Art der Tabellengestaltung lässt sich mit nur CSS nie perfekt umsetzen.

scbawik schrieb:
Auch fehlt eine dynamische Breite.

Wo?

Kleiner Kampf mit fixierter erster Zeile in Tabelle

sysop

Guest

Senior HTML'ler

sysop

Guest

Senior HTML'ler

Moderator

Senior HTML'ler

sysop

Guest

Anhänge

Moderator

sysop

Guest

Anhänge

Senior HTML'ler

sysop

Guest

Senior HTML'ler

Moderator

sysop

Guest

Senior HTML'ler

sysop

Guest

Aktives Mitglied

sysop

Guest

Senior HTML'ler

Aktives Mitglied