Tebellen scrollen

[Julian]

Moin,

Wenn ich das Coding der Tabelle ohne Spaltenüberschriften dieser Seite verwende und dann die Internet-Seite verkleinere, kann ich zwar die Tabelle nach links scrollen, aber leider nicht bis zum rechten Ende. Woran liegt dies?

[Auge]

Hallo

Wenn ich das Coding der Tabelle ohne Spaltenüberschriften dieser Seite verwende und dann die Internet-Seite verkleinere, kann ich zwar die Tabelle nach links scrollen, aber leider nicht bis zum rechten Ende. Woran liegt dies?

Prinzipiell hast du bis ans Ende gescrollt. Alle Informationen, die in der rechtzen Zelle stehen, sind im Viewport. Sie stehen nur untereinander anstatt in zwei Spalten nebeneinander.

Wenn dir rechts der Abstand zwischen Tabelle und Seitenrand fehlt, der wurde in dem Code-Beispiel des Tutorials unterhalb der Mindestbreite von 60em für table generell entfernt.

Tschö, Auge

[Julian]

Hallo,

Wenn dir rechts der Abstand zwischen Tabelle und Seitenrand fehlt, der wurde in dem Code-Beispiel des Tutorials unterhalb der Mindestbreite von 60em für table generell entfernt.

in meinem Beispiel kommt aber keine Angabe einer Mindestbreite vor,
siehe:

<style>
table {
	border-collapse: collapse;
	border: thin solid;
	margin: 2em;
}

tr {
	border-top: thin solid;
	border-bottom: thin solid;
}

tr:first-child {
	border-top: 0 none;
}

th, td {
	padding: 1em;
}

thead tr, tr:nth-child(even) {
	background-color: lightgrey;
}

th {
	font-size: 1.2em;
}

tbody th {
	text-align: left;
}

code {
	font-size: 1.2em;
}

td:last-child {
	min-width: 180px;
	text-align: right;
}

img:not(:first-child) {
	margin-left: 5px;
}
</style>

<table>
  <thead>
    <tr>
      <th colspan="4">CSS im Wandel der Zeit</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th><code>font-size</code></th>
      <td><a href="…">wiki.selfhtml.org/wiki/font-size</a></td>
      <td>Die Eigenschaft <code>font-size</code> bestimmt die Darstellungsgröße der Schrift.</td>
      <td>
        <img src="css1.png" alt="Bestandteil von CSS 1">
        <img src="css2.png" alt="Bestandteil von CSS 2">
        <img src="css21.png" alt="Bestandteil von CSS 2.1">
        <img src="css3.png" alt="Bestandteil von CSS 3">
      </td>
    </tr>
    …				
  </tbody>
</table>

[Rolf B]

Hallo Julian,

siehe:

Ich sehe nichts. Weil Du kein Onlinebeispiel erstellt hast.

Dehalb habe ich deinen Code mal in ein Fiddle kopiert, und bin ziemlich baff.

Die Tabelle ist bei mir ca 100px breiter als der Body, aber trotz explizitem overflow:scroll ist der Racker nicht dazu zu bringen, einen horizontalen Scrollbar anzuzeigen.

Dann habe ich eine HTML-Datei gemacht und das darin probiert. Da kriege ich den Scrollbar. Dann bin ich ins Fiddle zurück, auf einmal kam er dort auch. Wenn ich ja nur wüsste, was ich geändert habe?!?!?!

Entweder ein Einfluss des Fiddle, oder Edge ist buggy 🤷‍♂️

Was auf jeden Fall ziemlich gut funktioniert, ist, wenn man die Tabelle in ein div einhüllt und dieses mit overflow-x:scroll versieht. Der Body war bei mir ein störrischer Scroll-Kandidat. Ein eigener Scrollcontainer ist ohnehin besser, weil dadurch Seitenüberschriften oder Menüs nicht mitgescrollt werden.

Was man auf keinen Fall machen soll, ist ein display:block auf die Tabelle zu legen. Es gibt einige Stackoverflow-"Lösungen", die das raten, aber dann ist die table für die Layout-Engine des Browsers keine Tabelle mehr und dann löst diverse Quirks aus.

Rolf

[Julian]

Danke erstmal.

Die ganze Webseitenentwickung ist ja ganz schön tricky, wenn ich so die einzelnen Threads ansehe.

[Julian]

Hallo Rolf,

ich habe Deinen Vorschlag realisiert und es funktioniert.

Jetzt aber da "Aber":

Wenn die Tabelle viele Zeilen hat, so dass sie nicht in einer Seite angezeigt werden können (bei mir 10 Seiten), so muss man an das untere Ende der Tabelle scrollen, um den wagrechten Scrollbalken zu sehen.

[Rolf B]

Hallo Julian,

dann musst Du das div, das als Scrollcontainer dient, außer in der Breite auch in der Höhe begrenzen, so dass es Scrollcontainer komplett im Fenster sichtbar ist. Wie man das bei Dir am geschicktesten macht, kann ich ohne Kenntnis deiner Gesamtseite nicht sagen. Die Höhenlimitierung muss ja auf den Rest des Seiteninhalts abgestimmt sein.

Aber das Wort "Grid-Layout" erscheint definitiv schon mal am Horizont…

Rolf

[Julian]

Hallo Rolf

dann musst Du das div, das als Scrollcontainer dient, außer in der Breite auch in der Höhe begrenzen, so dass es Scrollcontainer komplett im Fenster sichtbar ist.

Das hat jetzt bei mir am PC funktioniert, aber auf dem Smartphone sieht es unschön aus. An einem Tablet wäre ja wieder eine andere Höhe nötig. Die kann man ja nicht im CSS abfragen. Schönen Gruß Julian

[Rolf B]

Hallo Julian,

Höhe (...) kann man ja nicht im CSS abfragen.

Nö, aber dank geeigneter Einheiten verwenden.

body {
   margin: 0;
   height: 100vh;
}

==> Der Body ist exakt so hoch wie der Viewport.

Woraufhin man den Body als Grid stylen und entsprechend aufteilen kann.

Man KANN das auch am Body sein lassen und beispielsweise einem Scroll-Container max-height: 90vh geben.

Rolf

[Julian]

Hallo Rolf,

woher hast Du all dieses Wissen?

Mit

Man KANN das auch am Body sein lassen und beispielsweise einem Scroll-Container max-height: 90vh geben.

hat es funktioniert.

Danke hierfür!

Ich habe vor der Tabelle <h1> und <h2> tags mit text-align: center;. Wenn ich die Tabelle horizontal scrolle, bleiben am PC die Überschriften zentriert, nicht aber am Smartphone.

Wie erreiche ich, dass auch dort die Überschriften mittig bleiben?

[Julian]

Vielleicht habe ich mich geirrt. Jetzt verschiebt sich die Überschrift auch am PC, daher jetzt:

Ich habe vor der Tabelle <h1> und <h2> tags mit text-align: center;.

Wie erreiche ich, dass die Überschriften mittig bleiben?

[Rolf B]

Hallo Julian,

woher hast Du all dieses Wissen?

Über 40 Jahre in der IT, und in 9 Jahren 14000 Forenbeiträge schreiben und am Wiki mitschreiben, da bleibt irgendwann ein bisschen hängen. Keine Ahnung, wie lange ich noch habe, bis das alles kristallisiert und in Form von Kalk dahin rieselt 😉

Ich nehme an, dass der gesamte Body zu breit ist. Was genau Du da falsch machst, müsste man am lebenden Objekt studieren.

Bitte liefere ein Online-Beispiel, keinen Sourcecode im Forum.

Rolf

[Julian]

Hallo Rolf

Bitte liefere ein Online-Beispiel, keinen Sourcecode im Forum.

Mein Beispiel für das Tabellenscrollling

Gruß

Julian

[MrMurphy]

Eine Grundlage jeder guten Website ist korrektes HTML und CSS. Da gibt es bei dir offensichtlich noch Defizite. Es wäre also sinnvoll, wenn du erst mal das aktuelle HTML und CSS lernen würdest.

Bestimmte HTML-Elemente sind für bestimmte Inhalte gedacht. Das deine x-en Platzhalter sind ist mir klar, aber du hast offensichtlich überhaupt keine Tabellendaten, wahrscheinlich weißt du nicht einmal was Tabellendaten sind.

Webseiten sollten so erstellt werden, das nur noch unten und oben gescrollt werden muss. Jedes Scrollen innerhalb von Webseiten ist benutzerunfreunlich und sollte deshalb vermieden werden. Mit einigen Problemen wirst du aktuell konfrontiert und das wird sich erfahrungsgemäß weiter durchziehen.

Um für den Inhalt (also die Informationen der Webseite) die passenden Elemente zu finden, muss man den Inhalt kennen.

Ich habe mal eine allgemeine Lösung erstellt:

<!DOCTYPE html>
<html lang="de">

<head>
   <meta charset="utf-8">
   <title>Scrollbare Tabelle</title>
   <meta name="description" content="Platzhalter - Ein kurze Beschreibung des Inhalts in Satzform">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
      p,
      th,
      td {
         font-size: 1.4rem;
      }
      h1,
      p {
         text-align: center;
      }
      .scrollen {
         background-color: gold;
         overflow: auto;
         margin-left: auto;
         margin-right: auto;
         width: 80vw;
         height: 70vh;
      }
   </style>
</head>

<body>
   <main>
      <h1>Scrollbare Tabelle</h1>
      <p>Lösung, aber sachlich sinnfrei.</p>
      <div class="scrollen">
         <table>
            <tr>
               <td>01</td>
               <td>xxxxxx</td>
               <td>xxxxxx</td>
               <td>xxxxx</td>
               <td>xxxxx</td>
               <td>xxxxxxxxxxxxxxxx</td>
               <td>xxxxxxx</td>
               <td>xxxxxxxxxxxxxxxxxx</td>
            </tr>
            <tr>
               <td>02</td>
               <td>xxxxxx</td>
               <td>xxxxxx</td>
               <td>xxxxx</td>
               <td>xxxxx</td>
               <td>xxxxxxxxxxxxxxxx</td>
               <td>xxxxxxx</td>
               <td>xxxxxxxxxxxxxxxxxx</td>
            </tr>
            <tr>
               <td>03</td>
               <td>xxxxxx</td>
               <td>xxxxxx</td>
               <td>xxxxx</td>
               <td>xxxxx</td>
               <td>xxxxxxxxxxxxxxxx</td>
               <td>xxxxxxx</td>
               <td>xxxxxxxxxxxxxxxxxx</td>
            </tr>
            <tr>
               <td>04</td>
               <td>xxxxxx</td>
               <td>xxxxxx</td>
               <td>xxxxx</td>
               <td>xxxxx</td>
               <td>xxxxxxxxxxxxxxxx</td>
               <td>xxxxxxx</td>
               <td>xxxxxxxxxxxxxxxxxx</td>
            </tr>
            <tr>
               <td>05</td>
               <td>xxxxxx</td>
               <td>xxxxxx</td>
               <td>xxxxx</td>
               <td>xxxxx</td>
               <td>xxxxxxxxxxxxxxxx</td>
               <td>xxxxxxx</td>
               <td>xxxxxxxxxxxxxxxxxx</td>
            </tr>
            <tr>
               <td>06</td>
               <td>xxxxxx</td>
               <td>xxxxxx</td>
               <td>xxxxx</td>
               <td>xxxxx</td>
               <td>xxxxxxxxxxxxxxxx</td>
               <td>xxxxxxx</td>
               <td>xxxxxxxxxxxxxxxxxx</td>
            </tr>
            <tr>
               <td>07</td>
               <td>xxxxxx</td>
               <td>xxxxxx</td>
               <td>xxxxx</td>
               <td>xxxxx</td>
               <td>xxxxxxxxxxxxxxxx</td>
               <td>xxxxxxx</td>
               <td>xxxxxxxxxxxxxxxxxx</td>
            </tr>
            <tr>
               <td>08</td>
               <td>xxxxxx</td>
               <td>xxxxxx</td>
               <td>xxxxx</td>
               <td>xxxxx</td>
               <td>xxxxxxxxxxxxxxxx</td>
               <td>xxxxxxx</td>
               <td>xxxxxxxxxxxxxxxxxx</td>
            </tr>
            <tr>
               <td>09</td>
               <td>xxxxxx</td>
               <td>xxxxxx</td>
               <td>xxxxx</td>
               <td>xxxxx</td>
               <td>xxxxxxxxxxxxxxxx</td>
               <td>xxxxxxx</td>
               <td>xxxxxxxxxxxxxxxxxx</td>
            </tr>
            <tr>
               <td>10</td>
               <td>xxxxxx</td>
               <td>xxxxxx</td>
               <td>xxxxx</td>
               <td>xxxxx</td>
               <td>xxxxxxxxxxxxxxxx</td>
               <td>xxxxxxx</td>
               <td>xxxxxxxxxxxxxxxxxx</td>
            </tr>
            <tr>
               <td>11</td>
               <td>xxxxxx</td>
               <td>xxxxxx</td>
               <td>xxxxx</td>
               <td>xxxxx</td>
               <td>xxxxxxxxxxxxxxxx</td>
               <td>xxxxxxx</td>
               <td>xxxxxxxxxxxxxxxxxx</td>
            </tr>
            <tr>
               <td>12</td>
               <td>xxxxxx</td>
               <td>xxxxxx</td>
               <td>xxxxx</td>
               <td>xxxxx</td>
               <td>xxxxxxxxxxxxxxxx</td>
               <td>xxxxxxx</td>
               <td>xxxxxxxxxxxxxxxxxx</td>
            </tr>
            <tr>
               <td>13</td>
               <td>xxxxxx</td>
               <td>xxxxxx</td>
               <td>xxxxx</td>
               <td>xxxxx</td>
               <td>xxxxxxxxxxxxxxxx</td>
               <td>xxxxxxx</td>
               <td>xxxxxxxxxxxxxxxxxx</td>
            </tr>
            <tr>
               <td>14</td>
               <td>xxxxxx</td>
               <td>xxxxxx</td>
               <td>xxxxx</td>
               <td>xxxxx</td>
               <td>xxxxxxxxxxxxxxxx</td>
               <td>xxxxxxx</td>
               <td>xxxxxxxxxxxxxxxxxx</td>
            </tr>
            <tr>
               <td>15</td>
               <td>xxxxxx</td>
               <td>xxxxxx</td>
               <td>xxxxx</td>
               <td>xxxxx</td>
               <td>xxxxxxxxxxxxxxxx</td>
               <td>xxxxxxx</td>
               <td>xxxxxxxxxxxxxxxxxx</td>
            </tr>
            <tr>
               <td>16</td>
               <td>xxxxxx</td>
               <td>xxxxxx</td>
               <td>xxxxx</td>
               <td>xxxxx</td>
               <td>xxxxxxxxxxxxxxxx</td>
               <td>xxxxxxx</td>
               <td>xxxxxxxxxxxxxxxxxx</td>
            </tr>
            <tr>
               <td>17</td>
               <td>xxxxxx</td>
               <td>xxxxxx</td>
               <td>xxxxx</td>
               <td>xxxxx</td>
               <td>xxxxxxxxxxxxxxxx</td>
               <td>xxxxxxx</td>
               <td>xxxxxxxxxxxxxxxxxx</td>
            </tr>
            <tr>
               <td>18</td>
               <td>xxxxxx</td>
               <td>xxxxxx</td>
               <td>xxxxx</td>
               <td>xxxxx</td>
               <td>xxxxxxxxxxxxxxxx</td>
               <td>xxxxxxx</td>
               <td>xxxxxxxxxxxxxxxxxx</td>
            </tr>
            <tr>
               <td>19</td>
               <td>xxxxxx</td>
               <td>xxxxxx</td>
               <td>xxxxx</td>
               <td>xxxxx</td>
               <td>xxxxxxxxxxxxxxxx</td>
               <td>xxxxxxx</td>
               <td>xxxxxxxxxxxxxxxxxx</td>
            </tr>
            <tr>
               <td>20</td>
               <td>xxxxxx</td>
               <td>xxxxxx</td>
               <td>xxxxx</td>
               <td>xxxxx</td>
               <td>xxxxxxxxxxxxxxxx</td>
               <td>xxxxxxx</td>
               <td>xxxxxxxxxxxxxxxxxx</td>
            </tr>
            <tr>
               <td>21</td>
               <td>xxxxxx</td>
               <td>xxxxxx</td>
               <td>xxxxx</td>
               <td>xxxxx</td>
               <td>xxxxxxxxxxxxxxxx</td>
               <td>xxxxxxx</td>
               <td>xxxxxxxxxxxxxxxxxx</td>
            </tr>
            <tr>
               <td>22</td>
               <td>xxxxxx</td>
               <td>xxxxxx</td>
               <td>xxxxx</td>
               <td>xxxxx</td>
               <td>xxxxxxxxxxxxxxxx</td>
               <td>xxxxxxx</td>
               <td>xxxxxxxxxxxxxxxxxx</td>
            </tr>
            <tr>
               <td>23</td>
               <td>xxxxxx</td>
               <td>xxxxxx</td>
               <td>xxxxx</td>
               <td>xxxxx</td>
               <td>xxxxxxxxxxxxxxxx</td>
               <td>xxxxxxx</td>
               <td>xxxxxxxxxxxxxxxxxx</td>
            </tr>
            <tr>
               <td>24</td>
               <td>xxxxxx</td>
               <td>xxxxxx</td>
               <td>xxxxx</td>
               <td>xxxxx</td>
               <td>xxxxxxxxxxxxxxxx</td>
               <td>xxxxxxx</td>
               <td>xxxxxxxxxxxxxxxxxx</td>
            </tr>
            <tr>
               <td>25</td>
               <td>xxxxxx</td>
               <td>xxxxxx</td>
               <td>xxxxx</td>
               <td>xxxxx</td>
               <td>xxxxxxxxxxxxxxxx</td>
               <td>xxxxxxx</td>
               <td>xxxxxxxxxxxxxxxxxx</td>
            </tr>
            <tr>
               <td>26</td>
               <td>xxxxxx</td>
               <td>xxxxxx</td>
               <td>xxxxx</td>
               <td>xxxxx</td>
               <td>xxxxxxxxxxxxxxxx</td>
               <td>xxxxxxx</td>
               <td>xxxxxxxxxxxxxxxxxx</td>
            </tr>
            <tr>
               <td>27</td>
               <td>xxxxxx</td>
               <td>xxxxxx</td>
               <td>xxxxx</td>
               <td>xxxxx</td>
               <td>xxxxxxxxxxxxxxxx</td>
               <td>xxxxxxx</td>
               <td>xxxxxxxxxxxxxxxxxx</td>
            </tr>
            <tr>
               <td>28</td>
               <td>xxxxxx</td>
               <td>xxxxxx</td>
               <td>xxxxx</td>
               <td>xxxxx</td>
               <td>xxxxxxxxxxxxxxxx</td>
               <td>xxxxxxx</td>
               <td>xxxxxxxxxxxxxxxxxx</td>
            </tr>
            <tr>
               <td>29</td>
               <td>xxxxxx</td>
               <td>xxxxxx</td>
               <td>xxxxx</td>
               <td>xxxxx</td>
               <td>xxxxxxxxxxxxxxxx</td>
               <td>xxxxxxx</td>
               <td>xxxxxxxxxxxxxxxxxx</td>
            </tr>
            <tr>
               <td>30</td>
               <td>xxxxxx</td>
               <td>xxxxxx</td>
               <td>xxxxx</td>
               <td>xxxxx</td>
               <td>xxxxxxxxxxxxxxxx</td>
               <td>xxxxxxx</td>
               <td>xxxxxxxxxxxxxxxxxx</td>
            </tr>
         </table>
      </div>
   </main>
   <footer>
      <p><a href="https://forum.selfhtml.org/self/2025/apr/14/tebellen-scrollen/1819572#m1819572">https://forum.selfhtml.org/</a></p>
   </footer>
</body>

</html>

[Julian]

Hi,

die Daten sind echte Tabellendaten in der gezeigten Form

<tr><td>01</td> <td>xxxxxx</td> <td>xxxxxx</td> <td>xxxxx</td> <td>xxxxx</td> <td>xxxxxxxxxxxxxxxx</td> <td>xxxxxxx</td> <td>xxxxxxxxxxxxxxxxxx</td></tr> <tr><td>02</td> <td>xxxxxx</td> <td>xxxxxx</td> <td>xxxxx</td> <td>xxxxx</td> <td>xxxxxxxxxxxxxxxx</td> <td>xxxxxxx</td> <td>xxxxxxxxxxxxxxxxxx</td></tr>

und werden über php in die html-Datei eingefügt. Es wird verlangt, dass horizontales Browsen realisiert wird, auch wenn an schmalen Displays mehrmals gewischt werden muss.

[Rolf B]

Hallo Julian,

mit der Angabe min-width:fit-content für den Scrollcontainer ist dieser Container mindestens so breit wie der Tabelleninhalt, d.h. wenn die Tabelle breiter ist als der Viewport, ist auch der Scrollcontainer breiter und macht damit auch den Body breiter. Einen horizontalen Scrollbar auf dem Scrollcontainer erhältst Du damit nicht, weil der ja immer mindestens so breit ist wie der Inhalt.

Statt dessen erhältst Du einen horizontalen Scrollbar für den Body, und weil die Überschriften horizontal über die Breite des Body zentriert sind, scrollen sie mit, wenn Du den Body scrollst

D.h. Du musst den Scrollcontainer in der Breite begrenzen, keine Mindestbreite vorgeben. Beispielsweise könntest Du width:95vw; setzen (95% der Fensterbreite). Oder, wenn Du weißt, dass der Body einen Margin von 8px hat, die Angabe width: calc(100vw - 16px).

Das <center> Element um den Scrollcontainer herum vergiss bitte. Das ist HTML 3 oder älter und mittlerweile zutiefst missbilligt. Lass das Element weg und gib dem Scrollcontainer die Eigenschaft justify-items:center, um eine "zu schmale" Tabelle darin zu zentrieren (nicht text-align!).

Wenn Du wirklich breite Tabellen anzeigst, ist eine Breitenbegrenzung des body nicht unbedingt sinnvoll, das musst Du für Dich entscheiden. Im Normalfall setzt man eine Maximalbreite für den Body, zumeist 60em.

Für Geräte mit kleinem Bildschirm (a.k.a. Handy) musst Du im <head> Bereich noch die Viewport-Angabe machen. Ansonsten simuliert das Handy einen 960px breiten Bildschirm. Siehe hier: Grundgerüst

Ob es wirklich verfehlt ist, wie Mr Murphy meint, eine Website vertikal und horizontal scrollbar zu machen, mag ich nicht beurteilen. Grundsätzlich würde ich es ebenfalls als bedenklich ansehen, auf einem kleinen Bildschirm riesige Datenbereiche darzustellen. Als Excel-geschädigter Schreibtischtäter habe ich persönlich allerdings keine Furcht vor Datenbereichen, die in 2 oder mehr Dimensionen gescrollt werden.

Rolf

[Julian]

Hallo Rolf,

Das <center> Element um den Scrollcontainer herum vergiss bitte. Das ist HTML 3 oder älter und mittlerweile zutiefst missbilligt. Lass das Element weg und gib dem Scrollcontainer die Eigenschaft justify-items:center, um eine "zu schmale" Tabelle darin zu zentrieren (nicht text-align!).

Das justify-items:center hat nicht funktioniert. Ich habe jetzt dem table-tag die CSS-Angaben

margin-left:auto;margin-right:auto

verpasst. Damit funktioniert es. Ist dies auch ein korrekter Weg?

[Rolf B]

Hallo Julian,

Ich habe jetzt dem table-tag...

<klugscheiß>stop - nein, hast Du nicht. Du hast dem table-element diese Eigenschaften verpasst. HTML gliedert ein Dokument in Elemente^[1], deren Anfang und (wo nötig) Ende durch Tags markiert werden. CSS-Eigenschaften gelten für Elemente. Auch dann, wenn sie im style-Attribut des öffnenden Tags notiert werden.</klugscheiß>.

Ja, geht auch. Sorry für justify-items, das geht scheinbar nur in Chromia, auch wenn MDN ausdrücklich sagt, dass es auch für block-level Layouts gilt und es keine expliziten Kompatibilitätsangaben dazu gibt. Die Bing-KI, die mir hier ständig in die Suche hineingrätscht, will mir weismachen, dass die Eigenschaft nur für Flexbox und Grid gelte. Hmmm. Die Spec sagt: "Applies to: all elements". Da gibt es wohl noch Diskussionsbedarf.

Rolf

---

1. <mehr-klugscheiß>Und in weitere Knotentypen des DOM wie Text, Kommentar, CDATA, ...</mehr-klugscheiß> ↩︎

[Julian]

Hallo,

die bisherigen Hilfen haben sich gelohnt. Mit dem horizontalen Scrollen klappt es jetzt!

Dank an alle!

Jetzt habe ich eine weitere Frage.

Die Überschriftszeile der Tabelle soll immer sichtbar bleiben, wenn ich nach unten scrolle. Sie soll mitscrollen wie die Tabellenzeilen beim Scrollen in horizontaler Richtung.

Ist dies auch machbar?

Ich hatte es mit position:fixed versucht, aber das hat ja eine ganz andere Wirkung.

[MudGuard]

Hi,

Die Überschriftszeile der Tabelle soll immer sichtbar bleiben, wenn ich nach unten scrolle. Sie soll mitscrollen wie die Tabellenzeilen beim Scrollen in horizontaler Richtung.

Ist dies auch machbar?

thead { position: sticky; }

(evtl. braucht's noch mehr, aber das ist das, was mir auf die Schnelle einfällt)

cu,
Andreas a/k/a MudGuard

[MrMurphy]

Ist dies auch machbar?

Ja. Probiers mal mit "position: sticky;".

[Julian]

Hallo,

"Die Überschriftszeile der Tabelle soll immer sichtbar bleiben"

Dies habe ich geschafft.

Wo es noch hakt:

Ich möchte einen größeren Abstand zwischen der Überschriftsteile und der ersten Datenzeile.

Ich habe border-spacing gefunden, aber dies würde ja dann für die gesamte Tabelle gelten.

[MrMurphy]

Deine Angaben und Fragen sind leider nicht sehr konkret. Die Hilfsbereitschaft in Foren sinkt zudem häufig rapide, wenn immer wieder kleckerweise Fragen nachgeschoben werden und damit bisherige Lösungen hinfällig werden.

So ist zum Beispiel nicht klar ob die Lücke nach der Überschriftzeile beim Scrollen verschwinden soll oder nicht.

Ich habe eine Lösung mit "padding" erstellt. Wahrscheinlich gibt es auch andere Lösungen, aber ob die bei der geforderten Flexbilität (horizontales und seitliches Scrollen) in allen Browsern bei unterschiedlichen Fensterbreiten funktionieren - keine Ahnung. Aktuell so, das der Abstand beim Scrollen bestehen bleibt.

<!DOCTYPE html>
<html lang="de">

<head>
   <meta charset="utf-8">
   <title>Scrollbare Tabelle</title>
   <meta name="description" content="Platzhalter - Ein kurze Beschreibung des Inhalts in Satzform">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
      p,
      th,
      td {
         font-size: 1.4rem;
      }
      h1,
      p {
         text-align: center;
      }
      .scrollen {
         overflow: auto;
         margin-left: auto;
         margin-right: auto;
         width: 80vw;
         height: 40vh;
      }
      .scrollen table {
        text-align: left;
        position: relative;
      }
      .scrollen thead tr:nth-of-type(1) th {
         padding-bottom: 2rem;
      }
      /*.scrollen tbody tr:nth-of-type(1) td {*/
         /*padding-top: 2rem;*/
      /*}*/
      .scrollen th,
      .scrollen td {
        padding: 0.25rem;
      }
      .scrollen th {
        background: white;
        position: sticky;
        top: 0; /* Don't forget this, required for the stickiness */
      }
   </style>
</head>

<body>
   <main>
      <h1>Scrollbare Tabelle</h1>
      <p>Lösung, aber sachlich sinnfrei.</p>
      <div class="scrollen">
         <table>
            <thead>
               <tr>
                  <th>01-01</th>
                  <th>xxxxxx</th>
                  <th>xxxxxx</th>
                  <th>xxxxx</th>
                  <th>xxxxx</th>
                  <th>xxxxxxxxxxxxxxxx</th>
                  <th>xxxxxxx</th>
                  <th>xxxxxxxxxxxxxxxxxx</th>
               </tr>
            </thead>
            <tbody>
               <tr>
                  <td>01</td>
                  <td>xxxxxx</td>
                  <td>xxxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxxxxxxxxxxxxx</td>
                  <td>xxxxxxx</td>
                  <td>xxxxxxxxxxxxxxxxxx</td>
               </tr>
               <tr>
                  <td>02</td>
                  <td>xxxxxx</td>
                  <td>xxxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxxxxxxxxxxxxx</td>
                  <td>xxxxxxx</td>
                  <td>xxxxxxxxxxxxxxxxxx</td>
               </tr>
               <tr>
                  <td>03</td>
                  <td>xxxxxx</td>
                  <td>xxxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxxxxxxxxxxxxx</td>
                  <td>xxxxxxx</td>
                  <td>xxxxxxxxxxxxxxxxxx</td>
               </tr>
               <tr>
                  <td>04</td>
                  <td>xxxxxx</td>
                  <td>xxxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxxxxxxxxxxxxx</td>
                  <td>xxxxxxx</td>
                  <td>xxxxxxxxxxxxxxxxxx</td>
               </tr>
               <tr>
                  <td>05</td>
                  <td>xxxxxx</td>
                  <td>xxxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxxxxxxxxxxxxx</td>
                  <td>xxxxxxx</td>
                  <td>xxxxxxxxxxxxxxxxxx</td>
               </tr>
               <tr>
                  <td>06</td>
                  <td>xxxxxx</td>
                  <td>xxxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxxxxxxxxxxxxx</td>
                  <td>xxxxxxx</td>
                  <td>xxxxxxxxxxxxxxxxxx</td>
               </tr>
               <tr>
                  <td>07</td>
                  <td>xxxxxx</td>
                  <td>xxxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxxxxxxxxxxxxx</td>
                  <td>xxxxxxx</td>
                  <td>xxxxxxxxxxxxxxxxxx</td>
               </tr>
               <tr>
                  <td>08</td>
                  <td>xxxxxx</td>
                  <td>xxxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxxxxxxxxxxxxx</td>
                  <td>xxxxxxx</td>
                  <td>xxxxxxxxxxxxxxxxxx</td>
               </tr>
               <tr>
                  <td>09</td>
                  <td>xxxxxx</td>
                  <td>xxxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxxxxxxxxxxxxx</td>
                  <td>xxxxxxx</td>
                  <td>xxxxxxxxxxxxxxxxxx</td>
               </tr>
               <tr>
                  <td>10</td>
                  <td>xxxxxx</td>
                  <td>xxxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxxxxxxxxxxxxx</td>
                  <td>xxxxxxx</td>
                  <td>xxxxxxxxxxxxxxxxxx</td>
               </tr>
               <tr>
                  <td>11</td>
                  <td>xxxxxx</td>
                  <td>xxxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxxxxxxxxxxxxx</td>
                  <td>xxxxxxx</td>
                  <td>xxxxxxxxxxxxxxxxxx</td>
               </tr>
               <tr>
                  <td>12</td>
                  <td>xxxxxx</td>
                  <td>xxxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxxxxxxxxxxxxx</td>
                  <td>xxxxxxx</td>
                  <td>xxxxxxxxxxxxxxxxxx</td>
               </tr>
               <tr>
                  <td>13</td>
                  <td>xxxxxx</td>
                  <td>xxxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxxxxxxxxxxxxx</td>
                  <td>xxxxxxx</td>
                  <td>xxxxxxxxxxxxxxxxxx</td>
               </tr>
               <tr>
                  <td>14</td>
                  <td>xxxxxx</td>
                  <td>xxxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxxxxxxxxxxxxx</td>
                  <td>xxxxxxx</td>
                  <td>xxxxxxxxxxxxxxxxxx</td>
               </tr>
               <tr>
                  <td>15</td>
                  <td>xxxxxx</td>
                  <td>xxxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxxxxxxxxxxxxx</td>
                  <td>xxxxxxx</td>
                  <td>xxxxxxxxxxxxxxxxxx</td>
               </tr>
               <tr>
                  <td>16</td>
                  <td>xxxxxx</td>
                  <td>xxxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxxxxxxxxxxxxx</td>
                  <td>xxxxxxx</td>
                  <td>xxxxxxxxxxxxxxxxxx</td>
               </tr>
               <tr>
                  <td>17</td>
                  <td>xxxxxx</td>
                  <td>xxxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxxxxxxxxxxxxx</td>
                  <td>xxxxxxx</td>
                  <td>xxxxxxxxxxxxxxxxxx</td>
               </tr>
               <tr>
                  <td>18</td>
                  <td>xxxxxx</td>
                  <td>xxxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxxxxxxxxxxxxx</td>
                  <td>xxxxxxx</td>
                  <td>xxxxxxxxxxxxxxxxxx</td>
               </tr>
               <tr>
                  <td>19</td>
                  <td>xxxxxx</td>
                  <td>xxxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxxxxxxxxxxxxx</td>
                  <td>xxxxxxx</td>
                  <td>xxxxxxxxxxxxxxxxxx</td>
               </tr>
               <tr>
                  <td>20</td>
                  <td>xxxxxx</td>
                  <td>xxxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxxxxxxxxxxxxx</td>
                  <td>xxxxxxx</td>
                  <td>xxxxxxxxxxxxxxxxxx</td>
               </tr>
            </tbody>
         </table>
      </div>
   </main>
   <footer>
      <p><a href="https://forum.selfhtml.org/self/2025/apr/14/tebellen-scrollen/1819572#m1819572">https://forum.selfhtml.org/</a></p>
   </footer>
</body>

</html>

[Julian]

Danke MrMurphy,

was mich verblüffte, war die Angabe von "background: white".

Als ich dieses weg ließ, hatte es nicht mehr funtioniert.

Bei einem farbigen Hintergrund müsste man dies demnach anpassen.

Schönen Gruß

Julian

[MrMurphy]

Der Hintergrund von Tabellen und anderen Elementen ist in der Vorgabe meist durchsichtig. Das übliche Weiß ist die Hintergrundfarbe des Browsers.

Da die Datenzeilen unter der Überschriftzeile durchlaufen muss die eine deckende Farbe bekommen, egal welche. Neutral bietet sich halt weiß an. Mit den Farben kann man bei entsprechendem Wunsch also spielen.

Um die Übersicht bei langen Tabellen zu erhöhen können auch unterschiedliche Überschriftzeilen in die Tabelle eingefügt werden, die dann unterschiedlich farblich gekennzeichnet werden. Das wird zwar den HTML-Regeln widersprechen, funktioniert aber - wenn es für die Besucher hilfreich ist…, warum nicht?

[Julian]

Danke, thank you, merci ...

[Gunnar Bittersmann]

@@MrMurphy

Der Hintergrund von Tabellen und anderen Elementen ist in der Vorgabe meist durchsichtig. Das übliche Weiß ist die Hintergrundfarbe des Browsers.

Üblich? Hm. Nutzer können die Hintergrundfarbe in ihren Browsereinstellungen ändern …

Und üblich sollte sein, dass sich Webseiten zwischen light mode und dark mode umschalten lassen.

Da die Datenzeilen unter der Überschriftzeile durchlaufen muss die eine deckende Farbe bekommen, egal welche. Neutral bietet sich halt weiß an.

… und wenn jemand weiße Schrift auf dunklem Hintergrund eingestellt hat, bekommt er die Überschriftzeile weiß auf weiß zu sehen, d.h. nicht zu sehen. (die ostfriesische Nationalflagge)

Nein, weiß bietet sich nicht an.

Was sich anbietet: die Systemfarbe des Hintergrunds zu verwenden. CSS2 sah das Schlüsselwort Background vor, was inzwischen missbilligt ist. [CSS-COLOR-3 §4.5]

Jetzt gibt es dafür das neue Schlüsselwort Canvas. [CSS-COLOR-4 §6.2]

Also nicht background: white, sondern background: Canvas verwenden.

☞ Beispiel

Funktioniert in allen gängigen Browsern. (Wer auch alte Browser unterstützen will, kann als Fallback auch den alten Wert mit angeben: background: Background; background: Canvas (in der Reihenfolge!). Aber Uralt-Browser, die Canvas nicht unterstützen, unterstützen wohl auch position: sticky nicht.)

🖖 Live long and prosper

[MrMurphy]

https://forum.selfhtml.org/self/2025/feb/25/divs-ohne-zwischenabstande/1819006#m1819006

[Gunnar Bittersmann]

@@MrMurphy

https://forum.selfhtml.org/self/2025/feb/25/divs-ohne-zwischenabstande/1819006#m1819006

Willst du jedes Mal, wenn es bei deinen Beiträgen etwas zu korrigieren gibt, diesen unsäglichen Link setzen und damit andeuten, dass du es nicht für nötig hältst, dein Wissen aufzufrischen?

🖖 Live long and prosper

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Was sich anbietet: die Systemfarbe des Hintergrunds zu verwenden.

Wenn man denn die Systemfarben beibehalten will.

Wenn man eigene Hintergrund- und Textfarben festlegen will (nur im Doppelpack!), bietet es sich an, diese in custom properties zu tun.

☞ Beispiel

🖖 Live long and prosper

[Rolf B]

Hallo Gunnar,

Üblich? Hm. Nutzer können die Hintergrundfarbe in ihren Browsereinstellungen ändern …

Habe ich gerade versucht (Edgium). Ich kann light/dark mode umschalten, wenn color-scheme auf light dark gesetzt ist. Ich kann auch ein Theme auswählen, aber das wirkt sich nicht auf den Dokumentinhalt aus.

Also eigentlich ist die Hintergrundfarbe, solange ich nicht aktiv etwas tue, weiß. Es sei denn, ich verwende die Zwangsverdunklung, die mir der Browser anbietet…

Übersehe ich etwas? Außer einem User-Stylesheet…

Rolf

[Matthias Scharwies]

Servus!

Hallo Gunnar,

Üblich? Hm. Nutzer können die Hintergrundfarbe in ihren Browsereinstellungen ändern …

Also eigentlich ist die Hintergrundfarbe, solange ich nicht aktiv etwas tue, weiß.

Wenn du in den Browsereinstelleungen etwas veränderst, tust du doch etwas aktiv:

Uff, das Forum sieht so aus:

Herzliche Grüße
Matthias Scharwies

[Gunnar Bittersmann]

@@Rolf B

Habe ich gerade versucht (Edgium). Ich kann light/dark mode umschalten, wenn color-scheme auf light dark gesetzt ist. Ich kann auch ein Theme auswählen, aber das wirkt sich nicht auf den Dokumentinhalt aus.

In Edge: Einstellungen > Barrierefreiheit > Seitenfarben

Für Firefox hat @Matthias Scharwies schon die Stelle gezeigt.

🖖 Live long and prosper

[Rolf B]

Hallo Gunnar und Matthias,

okay, wenn Firefox tatsächlich die Farben des Benutzers überklatschen kann…

In Edgium hatte ich bei Barrierefreiheit den Eindruck, dass dadurch die komplette Farbpalette aufgezwungen wird und alle Benutzerfarben entfallen. Die Frage nach weißem Adler auf weißem Grund stellt sich dann nicht. Deswegen habe ich das nicht als Option zum Ändern der Hintergrundfarbe wahrgenommen.

Rolf

@Matthias: Raus aus dem Forum! Du hast wichtigeres zu tun!! Tick Tock!!! 😉

[Matthias Scharwies]

Guten Morgen,

im Ausgangspost wurde bereits das passende Tutorial verlinkt:

• Tabellen/Responsive_Gestaltung

Scroll Snap fehlt dort noch, das nachgefragte position:stickyfindet sich im vorherigen Kapitel.

Ich habe ein ToDo eingefügt; wenn sich jemand austoben will – nur zu!

Die beiden unteren Tabellen zeigen, wie sich (Tabellen)-Inhalt responsiv nach unten schiebt.

Ich würde vorher gerne ein Beispiel zeigen, in dem der (Tabellen)-Inhalt horizontal bleibt, durch Scroll Snap und das im letzten Kapitel beschriebene position:sticky aber auch auf schmalen Viewports erreichbar bleibt.

Dazu sollte auch die Einleitung geändert werden.

Vielen Dank im Voraus!

Herzliche Grüße
Matthias Scharwies