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.

[Vinzenz Mai]

Hallo Felix,

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      | ----+--------------+

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.

Du solltest Deiner Struktur entsprechende tbody-Elemente verwenden.

Freundliche Grüße

Vinzenz

[Felix Riesterer]

Lieber Vinzenz Mai,

Du solltest Deiner Struktur entsprechende tbody-Elemente verwenden.

ist dieser Hinweis als Lösungsansatz gemeint, oder nur ein Verbesserungsvorschlag zur Semantik?

Auch mit <tbody> um meine "Zeilen" herum fehlt mir jegliche Möglichkeit, die Gitternetzlinien zu unterdrücken und gleichzeitig den Abstand zwischen meinen "Zeilen" zu vergrößern (bei beibehaltenen runden Ecken für das <th>).

Weder margin, padding noch border wirken auf <tbody>, solange ich seinen display-Wert nicht ändere - was meine Tabelle visuell zerstören würde.

Liebe Grüße,

Felix Riesterer.

[Matthias Apsel]

Om nah hoo pez nyeetz, Felix Riesterer!

Auch auf tbody wirkt margin imho nicht.
Wie wärs denn mit einer Polsterung?

Matthias

[MudGuard]

Hi,

Om nah hoo pez nyeetz, Felix Riesterer!

Auch auf tbody wirkt margin imho nicht.
Wie wärs denn mit einer Polsterung?

Die wäre ja innerhalb der Rahmen, sie soll aber außerhalb sein.

Außerdem (aus CSS 2.1):

Internal table elements generate rectangular boxes with content and borders. Cells have padding as well. Internal table elements do not have margins.

Für rows wird padding nicht extra erwähnt, könnte also sein, daß das nicht existiert ("boxes with content and borders").

cu,
Andreas

[Matthias Apsel]

Om nah hoo pez nyeetz, MudGuard!

Auch auf tbody wirkt margin imho nicht.
Wie wärs denn mit einer Polsterung?

Die wäre ja innerhalb der Rahmen, sie soll aber außerhalb sein.

Mein Gedanke war padding für tbody.

Außerdem (aus CSS 2.1):

Internal table elements generate rectangular boxes with content and borders. Cells have padding as well. Internal table elements do not have margins.

Für rows wird padding nicht extra erwähnt, könnte also sein, daß das nicht existiert ("boxes with content and borders").

Ja. und auch für tbody nicht.

Matthias

[dave]

Hi,

ich verstehe das Problem glaube ich nicht.

Runde Ecken ohne border-collapse: collapse; und border-spacing: 0;
Abstand zwischen den Zeilen.

Oder verwende ich den falschen Browser zum testen?

~dave

[Kai345]

[latex]Mae  govannen![/latex]

ich verstehe das Problem glaube ich nicht.

Würde ich auch denken. Du verwendest jedes Mal ein eigenes table-Element, soweit ich verstanden haben soll aber all das in *ein* table-Element und jeder der gezeichneten Abschnitte soll ein tr sein

Wobei ich vor langer Zeit bei einem ähnlichen Fall an den diversen Browser-Empfindlichkeiten gescheitert bin und letztendlich eine Liste mit einzelnen Tables verwendet habe ^^ Ob man das so machen kann, hängt nicht zuletzt von den Daten ab.

Stur lächeln und winken, Männer!
Kai

[MudGuard]

Hi,

ich verstehe das Problem glaube ich nicht.
Oder verwende ich den falschen Browser zum testen?

Du verwendest nur ein th pro Tabelle, bzw. nur einen abgerundeten Block pro Tabelle.

cu,
Andreas

[dave]

Hi,

Problem verstanden.

Eine Lösung fällt mir keine ein, nur dieser "Workaround".

Wenn th position: relative haben könnte, könnte man da sicher was mit ::before/after basteln …

~dave

[Felix Riesterer]

Lieber dave,

Runde Ecken ohne border-collapse: collapse; und border-spacing: 0;

vielen Dank für das Beispiel, aber die "Zeile" soll in sich keine Gitternetzlinien haben. Dafür brauche ich kollabierende margins!

Und außerdem will ich genau _eine_ Tabelle haben, ohne hrrrrr...

Liebe Grüße,

Felix Riesterer.

[zehbaeh]

Mehr als ein tbbody mit abgerundeten Ecken und entsprechendem Abstand?

Folgendes gradmal in cssdesk.com mit aktuellem FF eingegeben, sieht für mich (vereinfacht) danach aus was Du wünscht und ich davon verstanden habe.)

  
<table>  
  
<tbody>  
<tr>  
<th rowspan="2">1</th><td>2</td><td>3</td>  
</tr>  
<tr>  
<td>4</td><td>5</td>  
</tr>  
</tbody>  
  
<tbody>  
<tr>  
<th rowspan="2">1</th><td>2</td><td>3</td>  
</tr>  
<tr>  
<td>4</td><td>5</td>  
</tr>  
</tbody>  
  
</table>  

  
table {  
  border-spacing:0px;  
}  
table tbody {  
  display:table;  
  margin-bottom:10px;  
}  
th {  
  border-radius: 5px 0px 0px 5px;  
}  
td, th {  
  background:white;  
  padding:1em;  
}  

[Felix Riesterer]

Liebe(r) zehbaeh,

table tbody {

display:table;
  margin-bottom:10px;
}

  
damit beginnt in jedem tbody eine neue Tabelle und die senkrechten Gitternetzlinien setzen sich nicht über die Zeilen hinweg fort.  
  
Aber trotzdem danke.  
  
Liebe Grüße,  
  
Felix Riesterer.

-- 
ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)

[Gunnar Bittersmann]

@@Felix Riesterer:

nuqneH

Liebe CSS-Spezialisten,

Sry, dass ich mich erst jetzt angesprochen fühle. ;-)

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

Nö, wieso?

Wenn ich jetzt den Abstand zwischen den Zeilen (<tr>-Elementen) erhöhen will, dann kann ich leider nicht auf margin zurückgreifen

Aber auf border.

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

Nicht, wenn du box-shadow geschickt einsetzst: http://dabblet.com/gist/3272154

Wer weiß Rat?

Rat genug?

Qapla'

[Felix Riesterer]

Lieber Gunnar Bittersmann,

box-shadow geschickt einsetzst: http://dabblet.com/gist/3272154
[...]
Rat genug?

JUCHUUUU!!! Danke. :-)

Liebe Grüße,

Felix Riesterer.