td fixe %Breite, Scrollbalken nur wenn nötig

[marctrix]

Hej mathefritz,

Du
liegst schon richtig,

Dann solltest du auf keinen Fall Layout-Tabellen nehmen, die machen mehr Probleme, als sie lösen.

hab dazu momentan nur das dazu und nicht die Muße zu genauem Studium.

Ja, das ist schon so ziemlich der kompakteste Guide. Aber um drei Spalten zu erzeugen reicht auch flexbox.

Weil man manchmal einfach voran kommen muss, gebe ich dir ausnahmsweise einen Fisch (heißt ich zeige dir einen möglichen Lösungsweg) und sage dir zusätzlich, wo du die Angel findest (wo du also erklärt bekommst, was da passiert und warum das funktioniert): Flexboxen werden auch auf css−Tricks erklärt, der flex-Box−Guide ist aber wesentlich kürzer als der CSS-Grid-Guide. Den solltest du dir auf jeden Fall anschauen.

Und dann natürlich die ausführliche Erklärung hier im Wiki: Flexbox

Ok, kommen wir zum Fisch, damit du schnell satt wirst.

Für die flexbox-Lösung brauchst du zusätzliche Container, aber die hättest du bei der Tabelle auch.

Alles was du benötigst ist ein Container mit drei Kindern, je einer pro Tabelle.

Am schönsten wäre es einen Container zu nehmen, den du schon hast. Vielleicht passt ˋmainˋ. Wenn du für die Tabellen noch eine Überschrift hättest, würde ich für jede ein ˋsectionˋ-Element als Container nehmen, sonst ˋdivˋ.

Dann bekommst du folgendes HTML:

<main>
  <section>
    <h1>heading</h1>
    <table>
      <tr>
        <th>
          column heading
        </th>
      </tr>
    </table>
  </section>
  <section>
    <h1>heading</h1>
    <table>
      <tr>
        <th>
          column heading
        </th>
      </tr>
    </table>
  </section>
  <section>
    <h1>heading</h1>
    <table>
      <tr>
        <th>
          column heading
        </th>
      </tr>
    </table>
  </section>
</main>

Um die Sektionen nebeneinander zu stellen, machst du aus ˋmainˋ einen flex-container. Das macht die Kinder, im Beispiel also die Sektionen, automatisch zu flex-items.

Damit die sich den Platz untereinander aufteilen und die gesamte seitenbreite ausfüllen, gibst du für die Kinder ein ˋflex: autoˋ mit.

Dein css sieht dann so aus:

main {
  display: flex;
}
main > * {
  flex: auto;
}

Das funktioniert erst mal, lies dir aber auf jeden Fall die Theorie durch. Wenn man für andere Webseiten erstellt, sollte man wissen, was man tut. Auch wenn man dafür nicht bezahlt wird!

Marc