XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Tabelle in Tabelle (http://xhtmlforum.de/showthread.php?t=73852)

uwe85 04.06.2019 12:22
Tabelle in Tabelle
 
Liste der Anhänge anzeigen (Anzahl: 1)
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>

Sailor56 04.06.2019 13:58
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;
                }


Alle Zeitangaben in WEZ +2. Es ist jetzt 02:19 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023