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>