martinmiethke: Tabellenkopf fixieren: nur ein Teil bleibt stehen

problematische Seite

Hallo 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> &nbsp;<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

  1. problematische Seite

    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 { anstatt thead th {

    Gruss
    Henry

    --
    Meine Meinung zu DSGVO & Co:
    „Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“
    1. problematische Seite

      mach doch mal thead { anstatt thead th {

      Hallo Henry,

      das klappt tatsächlich.

      Das zusätzliche th steht 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 thead nicht zulässt, legen wir in diesem Beispiel den Regelsatz für thead th fest."

      Naja … und Chrome ist ziemlich weit verbreitet, soweit ich mitbekommen habe …

      Herzliche Grüße – Martin

    2. problematische Seite

      @@Henry

      mach doch mal thead { anstatt thead 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
  2. problematische Seite

    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.“
    1. problematische Seite

      davon abgesehen, solltest du vielleicht mal die ganze Seite überdenken neu zu coden?

      Haha … hast du meine Anfrage bis zu Ende gelesen? :-D

      1. problematische Seite

        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.“
        1. problematische Seite

          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!

  3. problematische Seite

    Hat denn noch jemand eine Idee zum verschwindenden unteren Rand des Kopfteils?

    1. problematische Seite

      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.“
      1. problematische Seite

        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 …

        Fixierter Tabellenkopf ohne unteren Rand