Richtiger Weg um Tabellenbreite so klein wie möglich

[molily]

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