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