nicht angemeldet
Tabellenkopf fixieren: nur ein Teil bleibt stehen
Henry
Gunnar BittersmannHallo miteinander,
auf meiner Website gibt es ein paar Seiten mit umfangreiche Tabellen, die also gescrollt werden müssen. Dabei soll natürlich der Kopf stehen bleiben, was ich bisher mit einem Inline-Frame gelöst habe. Erst jetzt kam ich drauf, dass das ja auch einfacher mit dem thead-Tag und CSS geht.
Der Teufel steckt hier allerdings im Detail: Warum wird mit diesem Code nur die zweite Zeile des Tabellenkopfs fixiert? Und warum verschwindet beim Scrollen der untere Rand des Tabellenkopfs?
<table style="width:950px;height:auto;" border="1" cellspacing="0" cellpadding="2">
<colgroup>
<col width="176">
<col width="224">
<col width="30">
<col width="30">
<col width="20">
<col>
<col width="20">
</colgroup>
<thead>
<tr>
<th colspan=7><span class="ds3">Vögel</span> <span style="font-size:12px;font-weight:normal">244 Arten (RL = Rote Liste, St = Status, B = Brutvogel, Bp = Brutpaar(e), G = Gastvogel, Dz = Durchzügler, Wg = Wintergast)</span></th>
</tr>
<tr>
<th>Name</th>
<th>Wiss. Artname</th>
<th>RL BB</th>
<th>RL D</th>
<th>St</th>
<th>Bemerkung</th>
<th><img class="dsR17" title="Tonaufnahme" src="bilder/speaker-green.gif" alt="Tonaufnahme" border="0"></th>
</tr>
</thead>
<tbody>
…
Hier die betreffende Stelle in der CSS-Datei (übrigens aus SELFHTML übernommen):
thead th {
position: -webkit-sticky;
position: sticky;
top: 0;
}
Und ja, ich weiß – es gibt auf dieser Seite (und auch auf den anderen) noch viel mehr zu überarbeiten. Aber eins nach dem andern …
Herzliche Grüße – Martin
-
Hallo martinmiethke,
Der Teufel steckt hier allerdings im Detail: Warum wird mit diesem Code nur die zweite Zeile des Tabellenkopfs fixiert?
mach doch mal
thead {anstattthead th {Gruss
Henry--
Meine Meinung zu DSGVO & Co:
„Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“-
mach doch mal
thead {anstattthead th {Hallo Henry,
das klappt tatsächlich.
Das zusätzliche
thsteht da wegen dieses Hinweises auf der betreffenden SELFHTML-Seite:"Beachten Sie: Da es im IE Edge und im Chrome zu einem Bug kommt, der diesen Wert für
theadnicht zulässt, legen wir in diesem Beispiel den Regelsatz fürthead thfest."Naja … und Chrome ist ziemlich weit verbreitet, soweit ich mitbekommen habe …
Herzliche Grüße – Martin
-
@@Henry
mach doch mal
thead {anstattthead th {Es wäre wünschenswert, wenn die Chromium-Entwicler anstatt immer neue Features zu entwickeln endlich mal ihre altbekannten Bugs fixen würden. Leider ist das Leben eines Webentwicklers kein Wunschkonzert und wir müssen uns mit den Bugs in Chrome, Edge, Opera etc. rumschlagen.
Dass
thead { position: sticky }in Chromia 89 nicht funktioniert, gehört dazu.Im Chrome Canary (91) geht’s dann; den 90er hab ich nicht installiert.
Kann sich also nur noch um ein paar Wochen handeln, bis man das endlich einsetzen kann.
😷 LLAP
--
“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
-
-
Hallo martinmiethke,
davon abgesehen, solltest du vielleicht mal die ganze Seite überdenken neu zu coden?
https://validator.w3.org/nu/?doc=http%3A%2F%2Fwww.untere-havel.info%2Fart-vog.htm
Gruss
Henry--
Meine Meinung zu DSGVO & Co:
„Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“-
davon abgesehen, solltest du vielleicht mal die ganze Seite überdenken neu zu coden?
Haha … hast du meine Anfrage bis zu Ende gelesen? :-D
-
Hallo martinmiethke,
Haha … hast du meine Anfrage bis zu Ende gelesen? :-D
Jo.. dachte du meinst damit das Wiki, weil du dich direkt davor daruf bezogen hast. Aber dennoch, mit überarbeiten ist da nicht getan, ein Haus was steht kann man umbauen, aber die Grundmauern sollten schon stabil sein. 😉
Gruss
Henry--
Meine Meinung zu DSGVO & Co:
„Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“-
dachte du meinst damit das Wiki
Ups … nein – ich würde mir doch nie anmaßen, da von einem Überarbeitungsbedarf zu reden 😬
Aber dennoch, mit überarbeiten ist da nicht getan
Kommt darauf an, was man darunter versteht :-) Ich meinte schon einen grundsätzlichen Umbau, z.B. weg von der Frame-Struktur und dem Seitenaufbau mit Tabellen.
Ach ja: Danke für deinen Tipp!
-
-
-
-
Hat denn noch jemand eine Idee zum verschwindenden unteren Rand des Kopfteils?
-
Hallo martinmiethke,
meinst du Entenverwandte? Dann packs doch mit in den Kopf.
Gruss
Henry--
Meine Meinung zu DSGVO & Co:
„Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“-
meinst du Entenverwandte? Dann packs doch mit in den Kopf.
Nein, ich meine was anderes: Sobald die Tabelle gescrollt wird, verschwindet der untere Rand (oder Rahmen) des Kopfteils. Siehe Screenshot …
-
-
