Tabellen Höhe abgleichen

  • Hallo,


    ich habe drei Tabellen, die als Inline-Elemente nebeneinander dargestellt werden. Jede Tabelle hat eine maximale Breite von 33.3%, sodass jede 1/3 des Bildschirms einnimmt. Da die Tabellen über eine Hintergrundfarbe verfügen, sollen sie alle gleich lang sein. Das Funktioniert auch, so lange eine Zeile nicht länger als 1/3 der Breite ist und somit umgebrochen wird. Dann ist eine Box logischerweise ein Stück größer als die anderen. Ich habe versucht das Problem zu lösen, in dem ich via Javascript die höchste der drei Boxen suche und die anderen zwei auf diese Höhe angleiche:



    Hier wird der Umbruch bei der Höhe aber nicht berücksichtigt, sodass die eine Box immer noch größer ist als die anderen. Ich habe auch schon versucht, die automatischen Umbrüche zu erkennen und dementsprechend die Höhe zu vergrößern. Hat aber ebenfalls nicht funktioniert, und so wirklich gefällt mir diese Lösung auch nicht.
    Da es optisch mit den Umbrüchen gut aussieht und der User so den kompletten Titel lesen kann, wäre es mir am liebsten, wenn die Umbrüche bleiben, aber die Höhe eben entsprechend angepasst wird. Die Titel aber einfach so zu kürzen, dass kein Umbruch erzeugt wird und z.B. am Schluss '...' angehängt wird, wäre aber auch eine Alternative. Auch das ist aber ein Problem, da ich natürlich alles dynamisch machen will. Also keine feste Containergröße, und dann grobe Schätzungen wann der Titel abgeschnitten werden muss oder ähnliche Murksereien.

  • Gib deinen Tabellen eine Höhe von 100%
    Anschließend legst du ein Div mit deiner Hintergrundfarbe drum und packst die Tabellen da rein.
    Fertig.


    Wenn du mit JS die Titel durchgehst, kannst du per
    var title = "Dein Titel der mehr als 20 Zeichen hat";
    var title2 = "Dein Titel";


    Dynamische Anpassung dafür per JS:
    if (title.length > 20) title = substr(title, 0, 19) + "...";


    Dies schneidet den Titel bei Überlänge auf 20 Zeichen zu und setzt ein ... an das Ende.

  • Den Hintergrund für den Container statt für die Tabelle zu setzen funktioniert, hätte ich eigentlich auch selbst drauf kommen können :D Danke.
    Den Text auf eine feste Länge abschneiden will ich ja gerade eben nicht. Das ganze passt sich dynamisch an die Bildschirmgröße an. Wenn ich also pauschal bei 20 Zeichen abschneide, wird auf größeren Bildschirmen Platz verschwendet. Aber so ists auch okay. Ich wollte nur nicht, dass die unterschiedliche Höhe optisch so krass sichtbar ist, wenn umgebrochen werden muss. Gar nicht zu kürzen halte ich dann wie gesagt für besser, da man so den kompletten Titel sieht.

  • Naja du kannst ja beim programmieren eigentlich alles erreichen was du möchtest.
    Muss natürlich auch immer die Frage im Raum liegen, ist das sinnvoll ja/nein und ist es vielleicht Ressourcenverschwendung...


    In dem Fall würde ich schon sagen, dass es nicht so sinnvoll ist mehrere Überschriften dynamisch anzupassen.
    Was du machen kannst ist die Spalte mit der Überschrift ein overflow: hidden geben und eine fixxe Größe. Dafür gibts auch noch ne Alternative (für die fixxe Größe)
    kommt mir aber grad nicht in den Sinn. Damit wär der Text dann aber auch einfach nur weg.
    Wenn du es aber für sinnvoll hälst, über window.innerWidth kriegst du beispielsweise die Breite in den meisten Browsern.
    Dann kannst du eine Funktion wie diese machen:


    Alternativ kannst du deine font-size auch in Prozent angeben.