Tabelle: Begrenzung der Zellenbreite funktioniert nicht

  • Hallo zusammen,


    ich habe aktuell ein Problem mit meiner CSS-gestylten Tabelle:


    Eigentlich dachte ich, ich hätte die Zellenbreite ordnungsgemäß begrenzt (in Testumgebungen funktionierte es auch), sobald ich den Code aber bei mit in den Shop hochlade mit der zugehörigen CSS-Gestaltung, klappt es leider nicht mehr und meine eigentlich auf 35% Breite begrenzten Zellen werden munter verlängert, sobald sich zu langer Inhalt darin befindet.

    Gedacht ist aber natürlich eigentlich, dass die Tabelle den Text dann automatisch umbricht und ihr eingestelltes ordentliches Raster behält.


    Wie gesagt: Im Tryout-Editor klappt es auch (siehe Anhang), nur in der "echten" Anwendung wird meine Breitenbegrenzung dann gekonnt ignoriert...

    Hat vielleicht irgendwer eine Idee wie ich das Problem lösen könnte?


    Hier der CSS-Code:



    Und der HTML-Code der Tabelle:



    Die Feldvariablen in der Tabelle werden bei uns aus der Warenwirtschaft automatisch mit Inhalten befüllt.

    Eine Zelle habe ich mal hier im Beispiel mit Blindtext gefüllt, damit man das Problem evtl. einfacher nachvollziehen kann.


    Ich danke Euch für Ideen! =)

    Besten Gruß,

    Sebastian


    html-seminar.de/woltlab/attachment/2921/

  • Grundproblem: Du mißbrauchst eine Tabelle zum Layouten.


    Tabellen sind aber nur für Tabellendaten gedacht, die du nicht hast.


    Tabellendaten sind in der Regel Zahlen oder auch mal einzelne Worte. Heißt: Echte, zulässige Tabellendaten sind recht kurz.


    Entsprechend verhalten sich Tabellen. Breitenangaben, egal ob in %, Pixel, Rem, ... sind nur aktiv, wenn der Inhalt der Zellen das zulässt. Ist der Inhalt eine Zelle breiter als die vorgegebene oder maximale Breite gelten die Werte nicht mehr.


    Was du willst: Vorhandene Daten in Tabellenform darstellen. Das ist etwas anderes als eine Tabelle mit dem table-Element.


    Von daher solltest du zulässige HTML-Elemente verwenden. Die kannst du dann mit Flexbox (display: flex;) oder CSS-Grid (display: grid;) nach deinen Vorstellungen gestalten.

  • Gut, danke - dann baue ich das Ganze auf Flexbox um.

    Für mich kann eine Tabelle auch längeren Text beinhalten, von daher war für mein Verständnis <table> da durchaus eine sinnvolle Wahl.

    Wenn dem nicht so ist muss ich es halt ändern ;)

    Danke!

  • Ich stimme MrMurphy so weit zu, dass ein Grid für dein Layout besser geeignet ist. Der Grund dafür, dass sich deine Tabellenzellen nicht an deine Vorgaben halten, ist jedoch ein anderer:

    Um diese Tabellen herum liegt ein doppeltes <pre> (vermutlich durch den Shop vorgegeben). Dieses hat per Default ein white-space: pre; Weil dieses an die Tabellenzellen vererbt wird, verhindert es, dass der Text umgebrochen wird:

    html-seminar.de/woltlab/attachment/2922/


    Überschreibe ich dies durch white-space: normal; , wird der Text umgebrochen und die Tabellenzellen halten die vorgegebene Breite ein:

    html-seminar.de/woltlab/attachment/2923/

  • Darf ich mich hier mal fragens einklinken?

    Früher, vor responsive Webdesign, hat man ja mit Tabellen gelayoutet und daher Tabellen für alles Mögliche und Unmögliche verwendet.

    Heute muss alles semantisch korrekt ausgezeichnet sein.


    Eine Tabelle enthält also tatsächlich njr Tabellendaten. Was SWSlate hier hat, ist in meinen Augen schon eine Tabelle im klassischen Sinne. Ich würde das sonst auch zB in Excel oder schlimmstenfalls einer Word-Tabelle darstellen. Daher finde ich HTML table hier durchaus angemessen.


    Meine Frage nun. Es gibt ja auch noch display:table oder die Möglichkeit mit einem Grid. Wenn man jetzt zB (wie ich später) eine Tabelle erstellen will, in der ein Datum und ein Event steht, wäre das ja im Grunde auch eine table. Aber angesichts des RWD würde ich da dann ws ein Grid wählen, da sonst Datum und Event immer nebeneinander stünden und sich das dann auf Handys nicht mehr ausgeht.


    Bin ich da auf dem richtigen Weg?

  • Zitat

    Früher, vor responsive Webdesign, hat man ja mit Tabellen gelayoutet

    Auch mit Frames.


    Zitat

    Daher finde ich HTML table hier durchaus angemessen.

    Was HTML-Tabellen sind entscheiden die HTML-Regelungen.


    Zitat

    Bin ich da auf dem richtigen Weg?


    Nein.


    Tabelle wird zum einen umgangssprachlich und zum anderen fachlich verwendet.


    Mit HTML-Tabellen sind fachliche Tabellendaten gemeint. Was das ist habe ich aufgegeben versucht zu erklären, da die meisten Anwender damit schlicht überfordert sind.


    Fachliche Tabellen kommen außerhalb von Wissenschaft und Wirtschaft so gut wie nie vor.


    Wenn von Tabellen gesprochen wird ist meist eine Tabellendarstellung gemeint. In der Regel verbergen sich dahinter Listen. So ist zum Beispiel die Bundesligatabelle fachlich eine Liste. Nach der Bezeichnung bei Überschriften kann man deshalb nicht gehen.


    Zum Beispiel kann ein Roman in Tabellendarstellung geschrieben werden (jedes Wort in eine Zelle), das bleibt trotzdem ein Roman.


    Zitat

    in der ein Datum und ein Event steht

    Das sind keine Daten für eine HTML-Tabelle.


    Zitat

    Es gibt ja auch noch display:table

    Richtig, das erzeugt eine Tabellendarstellung und ist auf viele HTML-Elemente zulässig anwendbar.

  • Meinst du mich oder den Shop? Wobei, eine dl würde für uns beide passen.


    Ich hab jetzt zum Probieren mal ein bisschen mit table und grid gespielt.

    Optisch stell ich mir das so vor wie's jetzt aussieht und dann muss ich das noch responsive machen. Das geht ja bei beiden mit Media Queries gut, es müssen ja auch die Zellen dann umformatiert werden. Das Datum wird dann hellgrün und der Inhalt weiß. Als Tabellenüberschrift kommt dann nur noch Programm.

    Table und Grid.


    Die DIVs kann man ja dann immer noch in eine DL ändern, dafür würde sich dann wohl das Grid besser eignen. Die table-rows sind wieder zum Formatieren (even, odd) sehr praktisch.

  • Na, was meint ihr?

    Da wo ich die Grid reingestellt hab, hab ich drunter jetzt noch die Variante mit der DL gemacht. Bei der Variante geht auch das even/odd wieder schön, da braucht man dann kein nth-child mehr.

    Für mich jetzt die beste der 3 Optionen.

  • Mal eine ganz andere Frage:

    Zitat von Elly

    Wenn man jetzt zB (wie ich später) eine Tabelle erstellen will, in der ein Datum und ein Event steht, wäre das ja im Grunde auch eine table.

    Wenn es sich um ein Event handelt, liegt die Vermutung nahe, dass noch weitere Infos dazu kommen wie Ort, Thema, Leiter, Vortragender ...

    Dann würde eine Lösung mit DL vermutlich scheitern. Und es wäre definitiv eine Tabelle mit Header und Body.

  • Zeit ist immer die gleiche, Ort auch. Von daher erübrigen sich zusätzliche Infos. Event in dem Sinn ist auch das falsche Wort dafür.


    Es ist eh fertig online jetzt, inkl. PDF. Da hat sich die DL ganz gut angeboten.

    Mit mehr Infos bräuchte man wohl eine Tabelle. Aber da sich die klassische table nicht responsive gestalten lässt, wäre das dann wohl ein Grid.

    Mit mehreren Infos wäre es mMn eh schwierig, das optisch ansprechend responsive zu gestalten. Man könnte dann mit display none und einer zweiten Version, die dann erscheint, arbeiten.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!