Abstand zwischen Tabellenzeilen plus runde Ecken

[Felix Riesterer]

Liebe CSS-Spezialisten,

gegeben sei eine Tabellenstruktur, in der folgende Varianten an Zeilen (<tr>-Elemente) möglich sind:

,----+----+----+----+
 | th | td | td | td |
 ----+----+----+----+  ,----+----+----+----+  |    | td | td | td |  | th +----+----+----+  |    |      td      |  ----+--------------+
 ,----+----+----+----+
 |    | td | td | td |
 | th +----+----+----+
 |    | td |   td    |
 ----+----+---------+  ,----+----+----+----+  |    | td | td | td |  |    +----+----+----+  | th | td |   td    |  |    +----+---------+  |    |      td      |  ----+--------------+

Man beachte, dass die linke obere und linke untere Ecke des einzigen <th>-Elements innerhalb von <tr> mittels border-radius abgerundet sein soll. Sowohl <th> als auch <td> hat dieselbe Hintegrundfarbe zugewiesen bekommen.

Zum Erreichen der runden Ecken musste ich für das umgebende <table>-Element sowohl border-spacing:0 als auch border-collapse:collapse einstellen.

Nun habe ich das Problem, dass ich den Abstand zwischen den Zeilen (<tr>-Elementen) nicht vergrößern kann. Im Moment "klebt" alles ohne jeden Abstand aneinander, was auch irgendwie nachvollziehbar ist.

Wenn ich jetzt den Abstand zwischen den Zeilen (<tr>-Elementen) erhöhen will, dann kann ich leider nicht auf margin zurückgreifen, da ich dazu das <tr>-Element auf display:block setzen müsste - und damit die Tabellenansicht verlöre.

Wenn ich den Abstand mittels border:10px solid white vergrößern wollte, dann verlöre ich die runden Ecken des <th>-Elements.

Wer weiß Rat?

Liebe Grüße,

Felix Riesterer.