Tabellen überlisten

[Bademeister]

Hi.

Ich beiße mir die Zähne am Formatieren einer Tabelle aus. Meine Tabelle hat nen Rahmen drumherum, und ich möchte gerne erreichen, dass das Caption-Element optisch oben innerhalb der Tabelle zu sehen ist. Ich mal's mal hin:

+-------------------------+
| Caption                 |
| +--------+------------+ |
| |Hier    | sind       | |
| +--------+------------+ |
| |die     | Zellen     | |
| +--------+------------+ |
+-------------------------+

So in etwa.
Meine Ansätze waren nun folgende (alles bezieht sich bisher nur auf den FF 3):

Erster Versuch:
Die Tabelle bekommt ein positives "padding-top" und die Caption einen negativen "margin-bottom".

Problem:
Damit das wie gewünscht klappt, muss die Tabelle "border-collapse: separate" haben, was an anderer Stelle Ärger macht - ich brauche zwischen manchen Zeilen bzw. Spalten Trennlinien, die ich mittels Borders der Zellen realisiere. Diese Trennlinien werden mir nun zerstückelt.

Zweiter Versuch:
Das Ganze imitieren, indem die Caption einen border bis auf -bottom, und die Tabelle einen border bis auf -top bekommt. Abgesehen davon, dass der Caption-Rand links imtunter um einen Pixel verschoben ist, habe ich folgendes

Problem:
Das Ganze kommt mir mit dem box-shadow in die Quere, den ich auch gerne um die Tabelle hätte. Denn ein box-shadow (mit einem blur > 0) kann ich nicht auf gleiche Weise wie den Rahmen imitieren, weil er dort, wo sich die Shadows von Caption und Tabelle überschneiden, dunkler wird (und nicht senkrecht verläuft, sondern "eingeschnitten").

Ich weiß, ich will da viel, Kompromissbereitschaft habe ich bisher noch keine ;-) Der Kompromiss wäre, evtl. ein zusätzliches div drumrum zu setzen - damit wäre alles machbar. Das möchte ich aber ungern - was mich wurmt, ist, dass es im Markup nicht mal was gruppieren würde: die Caption ist ja ein Kind der Tabelle, so dass ich ein "div" um die nackte Tabelle legen würde.

Hat jemand einen Tipp, wie ich eines der Probleme beheben oder das Ganze evtl. auf andere Weise umsetzen könnte?

Danke, viele Grüße,
der Bademeister

[LX]

Warum machst Du statt der Caption nicht einfach eine zusätzliche tr mit einem td colspan="2"?

Gruß, LX

[Gunnar Bittersmann]

@@LX:

nuqneH

Warum machst Du statt der Caption nicht einfach eine zusätzliche tr mit einem td colspan="2"?

Wegen pfui.

Den Unterschied zwischen einer Tabellüberschrift und Tabellenzellen kennst du?

Und dass man HTML-Elemente nicht missbräuchlich verwenden sollte, wißt du auch?

Wenn die Antwort auf eine der beiden Fragen nein sein sollte, wende dich an deinen Mentor.

Qapla'

[Gunnar Bittersmann]

@@Bademeister:

nuqneH

und ich möchte gerne erreichen, dass das Caption-Element optisch oben innerhalb der Tabelle zu sehen ist.

caption { display: block } sollte listig genug sein.

Qapla'

[Bademeister]

Hi Gunnar.

caption { display: block } sollte listig genug sein.

Ah. Mit war nicht klar, dass die Caption einen eigenen display-Wert "table-caption" hat. Vielen Dank, ich beginne zu verstehen, wo der Hase langläuft.

"display: block" (und ebenso "display: table-row") für die Caption sorgt tatsächlich dafür, dass sie wie gewünscht innerhalb der Tabelle steht. Allerdings 2 Probleme:

1.: Sie steht irritierenderweise nicht ganz oben, sondern zwischen dem thead und dem tbody ("caption-side" der Tabelle steht unberührt auf "top"). Und wenn ich display nicht direkt im Stylesheet, sondern im Firebug auf "block" setze, dann wird die Caption unterhalb des tbody gesetzt. Ein mir bisher unbekanntes Phänomen, das Style-Änderungen im Firebug zu Darstellungsabweichungen führen - habe damit allerdings auch nicht viel Erfahrung).

2.: Die Caption steht in der ersten Spalte! Die erste Spalte der Tabelle wird auf die Breite der Caption erweitert, und diese steht dann so da, als sei sie im ersten "td" einer Zeile. Das müsste ich natürlich noch irgendwie reparieren.

Danke jedenfalls für den Tipp. Ich bastle noch ein wenig rum. Tipps, wie ich obige Probleme in den Griff bekomme, wären natürlich mehr als willkommen.

Viele Grüße,
der Bademeister