Zeilenweises Flowen einer Tabelle

Problem: Ich habe zwei Tabellen, die jeweils key/value-Paare darstellen. Eine davon hat viele Zeilen mit langen Werten (aber die ersten paar Zeilen sind kurz). Eine andere hat wenige Zeilen mit kurzen Werten. Am platzeffizientesten erscheint es mir, wenn ich die eine Tabelle in die andere "einfüge", wobei die Zeilen die eingefügte Tabelle umfließen, wie Text es tun würde:
http://dronf.net/~jesus_666/temp/s2.png

Dazu müßte ich nun allerdings die Tabellenzeilen einzeln flowen. Tabellen als Blockelemente werden aber natürlich immer als ganzes geflowt, was das irgendwie kaputt macht:
http://dronf.net/~jesus_666/temp/s1.png

Jetzt suche ich nach einer sinnvollen Möglichkeit, den Kram zu bauen (sprich: Entweder die Tabellenzeilen einzeln zu flowen oder etwas optisch äquivalentes hnzukriegen).
Ich könnte statt einer Tabelle einen Haufen <div>s verwenden, dann habe ich aber das Problem, die Key-Spalten gleich breit zu kriegen. Da die Namen der Keys teilweise dynamisch sind, eignet sich eine statische Breite per CSS nicht wirklich.
Ich hatte auch nicht allzu viel Glück damit, die kleine Tabelle einfach per position: absolute über die große zu klatschen.

Fällt euch was sinnvolles ein?

Also ich würde das Ganze mit einer Tabelle horizontal trennen - nach der rechts oben eingefügten Tabelle (T2). Der obere Teil wäre dann wieder vertikal unterteilt in links T1 (große Tabelle) und rechts T2. Im unteren Teil (in deiner Grafik die unteren 4 Zeilen) gibt es dann nur noch T1. Dann muss man nur noch die ganzen Zwischenabstände etc. so einstellen, dass es gleichmäßig aussieht. Das wäre meine spontane Idee.

freundliche Grüße, Rolus

Da habe ich das Problem, bei einer getrennten Tabelle die Key-Spaltenbreiten gleich zu halten. Und zwei Tabellen draus zu machen ist problematisch, weil es schon ein zusammenhängender Block Daten ist.

1. Wieso geht es nicht mit position: absolute? (div um 2 Tabellen mit position: relative)
2. Ginge es nicht einfach mit

HTML-Code:

---

<table>
<tr><td></td><td></td>    <td rowspan="2"><table>...</table></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td colspan="2"></td></tr>
<tr><td></td><td colspan="2"></td></tr>
</table>

---

oder auch die innere Tabelle nur zu simulieren, indem du da vier Spalten machst zu Beginn.

Die einzige Möglichkeit, die mir jetzt einfallen würde, ist auch nur möglich, wenn du weißt, wie viele Zeilen deiner ersten Tabelle der Höhe der zweiten entsprechen und das die erste Tabelle dann manuell in zwei aufteilst (dann kannst du Teil A der ersten Tabelle und die zweite nebeneinander floaten). Wirklichen umfließen ist in HTML bei Tabellen soweit ich weiß bis jetzt nicht möglich (und wird es wahrscheinlich auch nie).

Alternativ könntest du ja auch für Key-Value-Paare eine Definitionsliste verwenden (mit <dl />, <dt /> und <dd />). Dann kannst du versuchen, die zu floaten. Tabellenähnliche Eigenschaften bekommst du hin, indem du den Elementen eine feste Breite verpasst. Du kannst ja mal damit rumspielen und gucken ob es hilft :)

Okay, jetzt habe ich es hingekriegt... mit einer Mischung aus position: absolute, colspan/rowspan und ewigem Rumprökeln. Daß die Boxen jetzt ganz anders aufgebaut und formatiert sind, hilft auch. Die Probleme vorher ergaben sich daraus, daß das Fx-box model sich bei position: absolute unintuitiv verhalten kann (sprich: eigentlich separate Boxen werden ggf. so behandelt, als wären sie es nicht). Wenn auch nicht ganz so unintuitiv wie bei float (später im selben Dokument habe ich es aufgegeben, zwei Elemente verschiedener Höhe innerhalb einer Box nebeneinander floaten zu wollen; jetzt muß halt das erzeugende Skript sicherstellen, daß beide gleich hoch sind).