[danielkussin]

Hi N1ceOne,

klar ist es in erster Linie nicht relevant, welches Format die Grafiken haben, allerdings solltest du trotzdem immer drüber nachdenken, insbesondere aus Gründen der Darstellungen und Dateigröße.

Also ich hab dir jetzt mal kurz einen Code zusammenbebaut, der deine Aufgabenstellung erfüllt (bis zu einer max. Breite der Tabelle von 400 Pixeln und einer min. Breite von 210 Pixeln. - Im Prinzip musst du es nicht einmal sehr kompliziert machen, da du bei deinem Problem, ja sogar eine feste Breite hast, so dass du nur eine Grafik bräuchtest, allerdings hast du dann keinen Spielraum mehr für Veränderungen.
Jetzt noch zu dem bis jetzt diskutierten Lösungsansatz mit zwei Grafiken und den nicht Sichtbaren Rundungen.
Dein Modell besteht aus 3 verschachtelten Boxen, wovon 2 Block-Elemente und 1 Inline-Elemente sind. (Unterschied siehe selfhtml.org o.ä. Quellen) Die Verschachtenlung musst du die vorstellen wie 3 Fotos gleicher Größe, wenn du die Foto jetzt auf einen Stapel legst, dann kannst du nur noch das Oberste sehen, und genau das ist passiert, du siehst nur die runden Ecken der obersten Grafik. Um das Problem zu lösen, musst du die Grafiken also versetzt stapeln, da aber die Breite deiner Boxen konstant sind 100% zum Elternelement (in deinem Fall die Tabellenzelle: 250px) kannst du das versetzen nur dann schaffen, wenn du kleinere Grafiken nutzt (max.: x - "Eckenradius" < 250px) und diese dann unterschiedlich ausrichtest.
In meinem Lösungsansatz habe ich eine Größe der Grafiken von 200 Pixeln gewählt, und diese dem Block-Element h4 und dem Inline-Element span hinzugefügt, wobei ich span noch in ein Block-Element (display:block) umwandeln musste und ihm die Höhe der Grafik (height:35px) zugewiesen habe. Am Ende habe ich dann beiden Hintergrundgrafiken unterschiedliche Positionen zugewiesen, so dass der span-Hintergrund nicht den h4-Hintergrund komplett überdeckt.

[sahnemuh]

Und was passiert, wenn die Überschrift mal mehrzeilig wird (in der Breite ist das Ganze ja fix. Textzoom mal außen vor)?

Ich habe das ganze mal ein wenig angepasst:
http://www.o315.de/temp/mgi/rounded_table/index.html

Vorteil: Eine Grafik, daher weniger requests (schneller geladen trotz höherer Dateigröße), mehrzeiligkeit möglich.
Man könnte das Ganze wie schon vom Vorredner angeregt auch noch mit einer Browserweiche versehen.
Das wäre zwar Codeseitig etwas aufwändiger aber dennoch die "schöne" Version, da sämtliche "modernen" Browser keine Grafik mehr benötigen:
http://www.o315.de/temp/mgi/rounded_table/index_modern.html

[danielkussin]

Gute Lösung, für eine fixe Breite!
Und auch die Sprite-Variante ist gut!

Willkommen im Neuen Jahr!