Timmorn: Richtiger Weg um Tabellenbreite so klein wie möglich

Hallo,

ich habe lange gesucht, aber direkt darauf keine Antwort gefunden:

Wenn ich eine Tabelle in einem Feld einer anderen Tabelle einfüge, dann hat diese 100% Breite des Feldes. Ich möchte aber nun, dass sie nur so breit wie der Inhalt ist. Mir wäre dabei jetzt die Lösung eingefallen, einfach ein sagen wir width="1 px"; oder so zu setzen. Dann hat der Inhalt ja Vorrang und es sollte das raus kommen, was ich will. Aber irgendwie schaut das nicht korrekt aus. Was wäre der korrekte Weg dies zu tun?

Danke
Timmorn

  1. @@Timmorn:

    nuqneH

    Wenn ich eine Tabelle in einem Feld einer anderen Tabelle einfüge

    … dann müffelt’s.

    Was wäre der korrekte Weg dies zu tun?

    Keine Layout-„Tabellemehr verwenden.

    Qapla'

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    1. @@Timmorn:

      nuqneH

      Wenn ich eine Tabelle in einem Feld einer anderen Tabelle einfüge

      … dann müffelt’s.

      Was wäre der korrekte Weg dies zu tun?

      Keine Layout-„Tabellemehr verwenden.

      Qapla'

      Du hast dir zwar durchaus Mühe mit den Zitaten gemacht. Aber leider bringt mich kein Einziges davon wirklich weiter. Interessant wäre: Was soll ich verwenden, wenn keine Tabelle für das Layout? In Selfhtml wird dieses Mittel durchaus noch beschrieben:
      http://de.selfhtml.org/html/tabellen/layouts.htm

      1. Om nah hoo pez nyeetz, Timmorn!

        [Vollzitat]

        bitte zitiere nur das, worauf du dich konkret beziehst.

        Interessant wäre: Was soll ich verwenden, wenn keine Tabelle für das Layout? In Selfhtml wird dieses Mittel durchaus noch beschrieben:
        http://de.selfhtml.org/html/tabellen/layouts.htm

        Dieser Inhalt ist überholt. Lies unsere Serie über HTML5.

        Wenn du dann eine Seite baust, denke _zuerst_ und _ausschließlich_ an die Inhalte, dass du eben eine Überschrift mit <h1> auszeichnest, einen Absatz mit <p>, ergänzende Inhalte als <aside> ...

        Dann kümmere dich per CSS um die Gestaltung. Auf dem Weg dorthin kannst du hier jede Menge Unterstützung bekommen.

        Matthias

        --
        Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Sand und Sandwich.

      2. Moin,

        Du hast dir zwar durchaus Mühe mit den Zitaten gemacht. Aber leider bringt mich kein Einziges davon wirklich weiter. Interessant wäre: Was soll ich verwenden, wenn keine Tabelle für das Layout?

        Zusätzlich zu Matthias Post:

        Grüße Marco

        --
        Ich spreche Spaghetticode - fließend.
  2. Hallo,

    Wenn ich eine Tabelle in einem Feld einer anderen Tabelle einfüge, dann hat diese 100% Breite des Feldes.

    Das denke ich nicht. Tabellen sind immer nur so breit, wie der Inhalt es erfordert. Das gilt auch für verschachtelte Tabellen. Außer du gibst ihnen explizit eine Breite (width).

    Beispiel: http://codepen.io/anon/pen/vDqdA

    Grüße,
    Mathias

  3. Hallo,

    Wenn ich eine Tabelle in einem Feld einer anderen Tabelle einfüge, dann hat diese 100% Breite des Feldes.

    Was gerne übersehen wird: Wenn ich einer Tabelle width:100% gebe, gilt das auch für die darin geschachtelten Tabellen. Das "C" in CSS bedeutet cascading = geschachtelt.

    Abhilfe: <table width="100%"> bei der äußeren Tabelle (statt CSS).

    Gast

    1. Hallo,

      Wenn ich einer Tabelle width:100% gebe, gilt das auch für die darin geschachtelten Tabellen.

      Das ist nicht korrekt, wie mein Beispiel auch zeigt.
      http://codepen.io/anon/pen/vDqdA

      Es gibt viele CSS-Eigenschaften, die an Kindelemente vererbt werden. »width« gehört nicht dazu. Und für eine Tabelle ohne width-Angabe gilt »Shrink to fit«, sie ist also nur so breit, wie der Inhalt es erfordert.

      Wenn ich natürlich eine Regel mit einem Selektor notiere, die sämtliche Tabellen betrifft (z.B. table {}), dann werden auch alle Tabellen formatiert. Dann sollte ich einfach einen passenderen Selektor wählen (z.B. #meine-tabelle {}).

      Das "C" in CSS bedeutet cascading = geschachtelt.

      Für was das »Cascading« in CSS steht, läst sich hier nachlesen:
      http://de.selfhtml.org/css/formate/kaskade.htm
      http://jendryschik.de/wsdev/einfuehrung/css/kaskade

      Abhilfe: <table width="100%"> bei der äußeren Tabelle (statt CSS).

      Das hat haargenau dieselbe Auswirkung wie die CSS-Formatierung width: 100%.

      Grüße,
      Mathias