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