zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Tabelle in Tabelle

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 04.06.2019, 12:22
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.06.2019
Beiträge: 1
uwe85 befindet sich auf einem aufstrebenden Ast
Unglücklich 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>
Angehängte Grafiken
Dateityp: png tabelle.png (15,7 KB, 5x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 04.06.2019, 13:58
Benutzer
neuer user
 
Registriert seit: 10.07.2018
Beiträge: 93
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

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;
                }
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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 09:05
Tabelle wie Paragraf? .rhavin CSS 5 14.01.2013 00:51
Position von Tabelle & Bild über der Tabelle definieren alessandro CSS 2 24.06.2012 23:49
Mysql: Tabelle Ordnen, nach Integer Werten (timestamp) oder Zeitformaten? braindead Serveradministration und serverseitige Scripte 8 14.03.2007 20:21
FF: Tabelle in Tabelle centern wuschba CSS 2 20.07.2006 10:00


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