Hej mathefritz,
für Deine viele Arbteit; leider ist das Ergebnis für mich unbefriedigend;
Es ist ja auch nicht fertig. Ich mache doch nicht deine Arbeit 😉
Nein im ernst. Du musst das natürlich an Deinen Bedarf anpassen. Den kannte ich ja nicht im Detail Erst mal habe ich Dir gezeigt, wie du drei Spalten ohne Tabelle nebeneinander bekommst.
auch mit
.vt{justify-content: space-between;}
im style
und<section class="vt">
statt nur <section> verwende.
justify-content
gehört an das Container-Element, nicht an die Kinder- Du möchtest
space-around
wenn du auch einen Abstand zum Browserfenster möchtest.
Hier mal die ganze Aufgabenstellung
Eine borderless Box die die ganze Fensterbreite einnimmt,
oberhalb und unterhalb ist auch noch Inhalt,
soll
Diese Box wird zur flexbox. - Falls du Grid nicht möchtest
nebeneinander 3 borderd Boxen mit gleichen Abmessungen enthalten;
deren
Breite mit der Fensterbreite wächst / schrumpft;
ob
Das ist das Standard-Verhalten von Flexboxen: Sie teilen den verfügbaren Platz untereinander auf (in welchem Verhältnis kannst du mittels flex-grow und flex-shrink festlegen).
die Höhe eine fixe oder durch den Inhalt bestimmte sein soll ist noch offen.
Entweder nichts machen oder align-items: flex-start
verwenden (wenn die Höhen nicht identisch sein sollen)
Die
Abständen der Boxen voneinander und den Fensterrändern sollen gleich sein.
space-around
Inhalt
der linken und die mittleren Box sind Tabellen, links und recht borderless,
Tabellen-Breite immer mindestens Boxbreite,
soll mit der Fensterbreite unbegrenzt wachsen,
kann aber
nicht schmaler als die durch die längsten whitespacefreien Zeichenfolgen
in td- und th-Elementen bedingte Mindesbreite werden.
Wenn
die Boxbreite unter dies Mindestbreite sinkt soll scrollen der ganzen Tabelle einsetzten.
Die Scrollbalken halte ich für eine sehr schlechte Idee, sofern andere Möglichkeiten bereit stehen. Es geht zwar, aber warum sollte man die Tabellen nicht untereinander darstellen. Dann braucht man viel weniger zu scrollen?!?
Marc