|
|||
Tabelle in Tabelle
Hallo und noch guten morgen
Ich bin (noch) kein Experte im Umgang mit CSS, stehe aber im Moment vor einem kleinen Problem. Ganz grob: Eine Tabelle enthält eine weitere Tabelle. Generell sollte beim Styling abgerundete Ecken vorhanden sein. Das Problem: In der Tabelle in der untersten Zeile tauchen die Abrundungen auch in den mittleren Zellen auf - sollen sie aber natürlich nicht! Das Liegt wohl daran, dass es die letzte Zeile der ersten Tabelle ist ? -->Siehe Bild in der Anlage Wie kann man das Problem lösen? Danke und viele Grüße Uwe Um das zu verdeutlichen der Code: HTML-Code:
<html> <head> <style> body { margin: 30px; } table { border-collapse: separate; border-spacing: 0; min-width: 350px; } table tr th, table tr td { border-right: 1px solid #bbb; border-bottom: 1px solid #bbb; padding: 5px; } table tr th:first-child, table tr td:first-child { border-left: 1px solid #bbb; } table tr th { background: #eee; border-top: 1px solid #bbb; text-align: left; } /* top-left border-radius */ table tr:first-child th:first-child { border-top-left-radius: 6px; } /* top-right border-radius */ table tr:first-child th:last-child { border-top-right-radius: 6px; } /* bottom-left border-radius */ table tr:last-child td:first-child { border-bottom-left-radius: 6px; } /* bottom-right border-radius */ table tr:last-child td:last-child { border-bottom-right-radius: 6px; } </style> <meta charset="utf-8"> <title>Test</title> </head> <body> <table> <tr> <th>Ü1</th> <th>Ü2</th> <th>Ü3</th> <th>Ü4</th> </tr> <tr> <td>11</td> <td> <table> <tr> <th>Ü1</th> <th>Ü2</th> <th>Ü3</th> <th>Ü4</th> </tr> <tr> <td>item1</td> <td>item2</td> <td>item1</td> <td>item2</td> </tr> <tr> <td>item1</td> <td>item2</td> <td>item1</td> <td>item2</td> </tr> </table> </td> <td>13</td> <td>14</td> </tr> <tr> <td>21</td> <td>22</td> <td> <table> <tr> <th>Ü1</th> <th>Ü2</th> <th>Ü3</th> <th>Ü4</th> </tr> <tr> <td>item1</td> <td>item2</td> <td>item1</td> <td>item2</td> </tr> <tr> <td>item1</td> <td>item2</td> <td>item1</td> <td>item2</td> </tr> </table> </td> <td>24</td> </tr> <tr> <td>31</td> <td>32</td> <td>33</td> <td> <table> <tr> <th>reset</th> <th>item2</th> <th>item1</th> <th>item2</th> </tr> <tr> <td>item1</td> <td>item2</td> <td>item1</td> <td>item2</td> </tr> <tr> <td>item1</td> <td>item2</td> <td>item1</td> <td>item2</td> </tr> <tr> <td>item1</td> <td>item2</td> <td>item1</td> <td>item2</td> </tr> </table> </td> </tr> </table> </body> </html> |
Sponsored Links |
|
|||
In so einem Fall muss man die Elemente, die du formatieren willst, separat betrachten, damit solche 'ungewollten' Vererbungen vom Eltern- auf die Kindelemente vermieden werden.
1. Die äußere Tabelle 2. Die Tabellen in der Tabelle Du musst verhindern, dass sich die Formate von 1. auf 2. vererben. Nach meiner Einschätzung geht das nur über die Verwendung von 'Kindselektoren' (>) ... https://developer.mozilla.org/de/doc...Kindselektoren Für dein Problem könnte das CSS dann so aussehen: HTML-Code:
/* top-left border-radius */ table > tbody > tr:first-child > th:first-child, table table tr:first-child th:first-child { border-top-left-radius: 6px; } /* top-right border-radius */ table > tbody > tr:first-child > th:last-child, table table tr:first-child th:last-child { border-top-right-radius: 6px; } /* bottom-left border-radius */ table > tbody > tr:last-child > td:first-child, table table tr:last-child td:first-child { border-bottom-left-radius: 6px; } /* bottom-right border-radius */ table > tbody > tr:last-child > td:last-child, table table tr:last-child td:last-child { border-bottom-right-radius: 6px; } |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Aktuelle Größe von Tabelle bekommen (dynamische Erzeugung der Tabelle) | internet | (X)HTML | 17 | 03.12.2014 10:05 |
Tabelle wie Paragraf? | .rhavin | CSS | 5 | 14.01.2013 01:51 |
Position von Tabelle & Bild über der Tabelle definieren | alessandro | CSS | 2 | 25.06.2012 00:49 |
Mysql: Tabelle Ordnen, nach Integer Werten (timestamp) oder Zeitformaten? | braindead | Serveradministration und serverseitige Scripte | 8 | 14.03.2007 21:21 |
FF: Tabelle in Tabelle centern | wuschba | CSS | 2 | 20.07.2006 11:00 |