nicht angemeldet
Rolf B
Tabellenkalk
Rolf B
Matthias Apsel
Tabellenkalk
Rolf B
Auge
Tabellenkalk
Auge
Rolf B
Tabellenkalk
Hallo liebe Forum-User,
ich bin neu hier und hoffe ihr könnt mir bei einem Problem helfen.
Ich habe eine Tabelle in HTML angelegt und diese mit CSS formatiert. Hierzu habe ich eine separate styles.css (hier styles_test.css) erstellt in der ich die Tabelle mit Hilfe einer Klasse (.mu_lines) formatiert habe. Innerhalb der CSS-Datei befindet sich noch eine Klasse (mu_techdata) für einen anderen Tabellentyp, welcher auf anderen Seiten verwendet wird. Das Design der Tabelle soll weiß mit dunklen horizontalen Linien (1px) sein und einem hellgrauen Hover-Effekt. Das Problem ist dass die HTML offensichtlich auch auf die Klasse .mu_techdata zurückgreift, ohne dass ich diese in der HTML verwendet habe?
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="styles_test.css">
<meta charset="utf-8">
<title>Test-Tabelle</title>
</head>
<body>
<table class="mu_lines">
<thead>
<tr>
<th colspan="5" srowspan="1">Motor und Antriebsstrang</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="3">Motordaten</th>
<td>Motor</td>
<td colspan="3">TCD 3.6 L4</td>
</tr>
<tr>
<td>Motorleistung</td>
<td>55 kW bei 2300 U/min</td>
<td colspan="2">85 kW bei 2300 U/min</td>
</tr>
<tr>
<td>Abgasstufe</td>
<td colspan="3">EU V / US T4f oder EU IIIA</td>
</tr>
<tr>
<th rowspan="2">Antrieb</th>
<td>Getriebe</td>
<td>ZF</td>
<td>ZF</td>
<td>Allison</td>
</tr>
<tr>
<td>Antriebsachse</td>
<td colspan="3">Differentialachse</td>
</tr>
<tr>
<th rowspan="3">Leistungsdaten</th>
<td>Zugkraft</td>
<td colspan="3">45 kN</td>
</tr>
<tr>
<td>Anhängelast*</td>
<td colspan="3">17,2 t (nach BGV C10 bei 30 km/h)<br/>
50 t (nach DIN 15172 bei 6 km/h)</td>
</tr>
<tr>
<td>Pushback-Betrieb</td>
<td colspan="3">bis 50 t MTOW (nach IATA)</td>
</tr>
<tr>
<th rowspan="7">Sonstiges</th>
<td>Bremsanlage</td>
<td colspan="3">Hydraulische Zweikreis-Bremsanlage, Scheibenbremse mit zwei Bremssätteln pro Seite vorn, Scheibenbremse hinten kombiniert mit Feststellbremse (Federspeicher elektrohydraulisch, auf Hinterräder wirkend)</td>
</tr>
<tr>
<td>Lenkung</td>
<td colspan="3">Hydraulische Lenkanlage</td>
</tr>
<tr>
<td>Achse vorn</td>
<td colspan="3">In Blattfedern gelagerte Lenkbremsachse mit Stoßdämpfer</td>
</tr>
<tr>
<td>Achse hinten</td>
<td colspan="3">In Blattfedern gelagerte Differentialachse mit Stoßdämpfer</td>
</tr>
<tr>
<td>Elektroanlage</td>
<td colspan="3">24 V</td>
</tr>
<tr>
<td>Tank</td>
<td colspan="3">85 Liter Diesel</td>
</tr>
<tr>
<td>Geschwindigkeit</td>
<td colspan="3">bis 30 km/h</td>
</tr>
</tbody>
</table>
<p><i>* bei trockener und ebener Fahrbahn</i></p>
</body>
</html>
body{
font-family: 'Lucida Grande', Arial, Helvetica, sans-serif !important;
font-size: 9.6pt;
color: #616161;
}
/* Tabellenformatierung fuer Technische Daten FHF */
.mu_lines caption {
background-color: #ffffff;
font-size: 1.5em;
color: #4E6FB2;
}
/* bei "mu_lines table" funktioniert border-collapse: collapse nicht! */
table.mu_lines {
border-collapse: collapse;
}
.mu_lines thead th {
background-color: #ffffff;
color: #4E6FB2;
font-weight: lighter;
font-size: 1.5em;
text-align: left;
vertical-align: top;
}
.mu_lines tbody tr:hover {
background-color: #f4f4f4;
}
.mu_lines tbody th, td {
background-color: #ccffff;
padding: 5px 15px 5px 5px;
text-align: left;
line-height: 1.5em;
vertical-align: top;
border-top: 2px solid #a1a1a1;
}
/* Tabellenformatierung fuer Technische Daten SUG */
.mu_techdata table {
width: 100%;
border-collapse: collapse;
}
.mu_techdata tr:nth-of-type(odd) {
background: #e4e4e4;
}
.mu_techdata tr:nth-of-type(even) {
background: #f4f4f4;
}
.mu_techdata tr:hover {
background-color: #d5d5d5;
}
.mu_techdata th {
background: #4E6FB2;
color: #ffffff;
font-weight: bold;
font-size: 1.2em;
}
.mu_techdata td, th {
padding: 8px 15px 8px 12px;
border: 2px solid #ffffff;
text-align: left;
line-height: 1.5em;
}
ich habe die Hintergrundfarbe mit Absicht verändert, damit man gleich das Problem erkennt. Kommentiere ich den Codestrang mit der mu_techdata Klasse aus funktionert das mit den Linien wie gewünscht wie gewünscht?
ist die weiße Linie bei .mu_techdata auf 1px eingestellt wird sie von der grauen 2px Linie aus der .mu_lines überlagert???
Ein weiteres Problem ist der Hovereffekt, den ich zwar mit "td" auf die Zellen anwenden kann, der aber bei "tr" nicht funktioniert. Und ich möchte ihn gerne auf die ganze Zeile anwenden, ausgenommen die Kopfspalte links. Ich hatte mal einen Moment, an dem ich es hinbekommen habe, aber es ist mir leider entfallen wie :)
Die Geschichte mit dem border-collapse (siehe Kommentar im Code) würde mich auch sehr interessieren.
Bin auch dankbar für weitere Tips, da gibt es bestimmt noch einiges zu korrigieren, aber wichtig sind mir die 3 oben genannten Probleme.
Ich muss dazu sagen dass ich nur innerhalb eines Typo3-Systems manche Objekte mit HTML formatiere. Das letzte mal mit CSS habe ich vor 6 Jahren gearbeitet und das auch nicht sehr intensiv. Mittlerweile ist viel passiert und ich hoffe sehr hier Hilfe zu finden.
Vielen Dank und Grüße
Rolf B
Matthias Apsel
Tabellenkalk
Auge
Auge
Auge
Hallo Jörg,
Du hast das Komma falsch verstanden.
Die Selektorliste .foo td, th gilt für die td, die Kind eines Elements mit Klasse foo sind, und für alle th Elemente.
Du willst vermutlich dies:
.foo td, .foo th
Rolf
Hallo,
falsch verstanden.
Auch die Formulierung „Klasse in der CSS-Datei“ deutet auf kreative Grundlagenkenntnisse 😉.
Gruß
Kalk
Hallo Tabellenkalk,
ach komm, jetzt sei nicht pingelig. Es reicht, wenn Gunnar das ist ;)
Ich weiß, dass es HTML Klassen sind, die in CSS-Selektoren genutzt werden.
Klassen im CSS eben.
Rolf
Hallo Jörg Giera,
Das Problem ist dass die HTML offensichtlich auch auf die Klasse .mu_techdata zurückgreift, ohne dass ich diese in der HTML verwendet habe?
/* bei "mu_lines table" funktioniert border-collapse: collapse nicht! */
Es gibt keine Tabelle, die Kind von mu_lines ist.
.mu_lines tbody th, td {
Du sprichst die th in den tbodys der Tabellen .mu_lines an und alle td, unabhängig von der Klasse der Tabelle.
.mu_techdata td, th {
analog.
Bis demnächst
Matthias
Vielen Dank für eure Hilfe!
@Tabellenkalk du hast absolut Recht mit den kreativen Grundlagenkenntnissen 😂 ich will mich da gar nicht rausreden... Bitte nehmt mir so manchen nicht korrekten Ausdruck nicht krumm 🙈
Das mit den Kommata habe ich verstanden und so wie Rolf vorgeschlagen hat ausprobiert. Hat so auch funktioniert. Ich habe das jetzt aber in 2 separate Blöcke gepackt, da sich bei th der fette Schriftstil ja auch nur durch die Standardeinstellung von th ergeben hatte und sich da vielleicht doch noch Änderungen ergeben könnten.
.mu_lines tbody th {
background-color: #ffffff;
padding: 5px 15px 5px 5px;
font-weight: bold;
text-align: left;
line-height: 1.5em;
vertical-align: top;
border-top: 1px solid #a1a1a1;
}
.mu_lines tbody td {
background-color: #ffffff;
padding: 5px 15px 5px 5px;
text-align: left;
line-height: 1.5em;
vertical-align: top;
border-top: 1px solid #a1a1a1;
}
dasselbe dann auch in der Klasse "mu_techdata"
Das mit der table-Geschichte habe ich noch nicht ganz verstanden, liegt das daran dass ich die Klasse in das table tag geschrieben habe? Hätte es funktioniert wenn das im body tag stehen würde? Ich mach mich da auch nochmal im Wiki schlau 😀
Was mich noch brennend interessiert ist die Sache mit dem Hover-Effekt. Ich vermute mal das liegt daran, dass th aus verbundenen Zeilen besteht. Mit td:hover funktioniert es ja. Aber dass tr:hover gar nicht funktioniert würde ich gerne genauer verstehen. Wie könnte es funktionieren dass die td Zellen den Effekt gemeinsam haben und th davon ausgeschlossen ist?
Viele Grüße
Hallo,
@Tabellenkalk du hast absolut Recht mit den kreativen Grundlagenkenntnissen 😂
Dann schau dir bitte mal unser Wiki gründlich an…
Dieses
.mu_lines tbody th { background-color: #ffffff; padding: 5px 15px 5px 5px; font-weight: bold; text-align: left; line-height: 1.5em; vertical-align: top; border-top: 1px solid #a1a1a1; } .mu_lines tbody td { background-color: #ffffff; padding: 5px 15px 5px 5px; text-align: left; line-height: 1.5em; vertical-align: top; border-top: 1px solid #a1a1a1; }
geht besser so:
.mu_lines tbody th, .mu_lines tbody td {
background-color: #ffffff;
padding: 5px 15px 5px 5px;
text-align: left;
line-height: 1.5em;
vertical-align: top;
border-top: 1px solid #a1a1a1;
}
.mu_lines tbody th {
font-weight: bold;
}
Gruß
Kalk
Danke Kalk,
bin schon den ganzen Vormittag am Wiki lesen. Ich verstehe deine Empfehlung.
Du hast natürlich recht. So sieht das ganze auch eleganter und übersichtlicher aus.
Hallo Jarvis,
tr:hover funktioniert grundsätzlich schon. Auch bei colspan Zellen. Zumindest in Chrome. Welchen Browser verwendest Du?
Aber was meinst Du hier:
Und ich möchte ihn gerne auf die ganze Zeile anwenden, ausgenommen die Kopfspalte links.
Was ist ausgenommen - der Effekt oder der Auslöser? Anders gesagt: Soll die Hintergrundfarbe nur für die td gelten, aber nicht für die th? Das geht. Oder soll der Hover-Effekt nur aktiv werden, wenn man über td hovert? Dafür bräuchtest Du die :has() Pseudoklasse, die in CSS Selectors Level 4 definiert ist und die noch kein Browser implementiert, oder JavaScript (mouseenter/mouseleve Events auf den td behandeln und dementsprechend auf dem tr eine Klasse setzen, z.B. "hover". Das ist nur ziemlich aufwändig, weil mouseenter/mouseleave nicht bubblen und darum auf jedem td einzeln registriert werden müssen.
Demo-Fiddle mit :hover und JavaScript-Version für den :has-Fall.
Rolf
Die Hintergrundfarbe soll nur für td gelten, allerdings für die ganze Zeile, auch bei mehreren Spalten. Nicht nur für die einzelnen Zellen.
Im Moment funktioniert der Effekt mit tr:hover überhaupt nicht bei mir
Könnte auch theoretisch so sein dass die "Kopfspalte" links einfach grau bleibt wenn man über die Zeilen fährt, die zu dieser Kopfspalte gehören.
In meiner Vorstellung bleibt die "Kopfspalte" links allerdings einfach weiß und die td werden beim drüberfahren als ganze Zeile eingefärbt.
Hallo
Die Hintergrundfarbe soll nur für td gelten, allerdings für die ganze Zeile, auch bei mehreren Spalten. Nicht nur für die einzelnen Zellen.
Im Moment funktioniert der Effekt mit tr:hover überhaupt nicht bei mir
Könnte auch theoretisch so sein dass die "Kopfspalte" links einfach grau bleibt wenn man über die Zeilen fährt, die zu dieser Kopfspalte gehören.
In meiner Vorstellung bleibt die "Kopfspalte" links allerdings einfach weiß und die td werden beim drüberfahren als ganze Zeile eingefärbt.
Du kannst die ganze Zeile einfärben und dann die th davon ausnehmen, was meiner Meinung nach, besonders bei späterer Pflege des Codes, recht aufwendig wird (also nicht machen, hier nur zur Dokumentation notiert) …
tbody tr:hover {
background-color: #ccc;
}
tbody tr:hover th {
background-color: #fff;
}
… oder du selektierst gleich nur die Elemente, die du einfärben willst.
/*
es werden die Zellen (td) selektiert, die Kinder einer
gehoverten Tabellenzeile (tr) innerhalb von tbody sind
*/
tbody tr:hover td {
background-color: #ccc;
}
Tschö, Auge
Hallo,
/* es werden die Zellen (td) selektiert, die Kinder einer gehoverten Tabellenzeile (tr) innerhalb von tbody sind */ tbody tr:hover td { background-color: #ccc; }
Nope, es werden die Zellen (td) selektiert, die Nachkommen …
Gruß
Kalk
Hallo
/* es werden die Zellen (td) selektiert, die Kinder einer gehoverten Tabellenzeile (tr) innerhalb von tbody sind */ tbody tr:hover td { background-color: #ccc; }Nope, es werden die Zellen (td) selektiert, die Nachkommen …
Du hast natürlich recht. Es wird jede Tabellenzelle vom Typ td selektiert, die auf irgendeiner Ebene Kind oder Kindeskind der gehoverten Zeile ist. Das gilt auch für td innerhalb einer Tabelle innerhalb der gehoverten Zeile, also wenn in einer Tabellenzelle eine weitere Tabelle notiert ist.
An den Fall habe ich nicht gedacht. Ich bin davon ausgegangen, dass sowas seit den unseligen Zeiten von Tabellenlayout in ernsthaften Projekten nicht mehr gebaut wird und bestenfalls als Altlast existiert, in die man keine neuen Features (wie zum Beispiel eben tr:hover) einbaut.
Wenn also nur die Zellen, die direkte Kinder der gehoverten Zeile sind, selektiert werden sollen, lautet der Selektor:
tbody tr:hover > td {
background-color: #ccc;
}
Tschö, Auge
PS: Ich habe in deinem Posting den zitierten Codeblock repariert.
Hallo Auge,
damit wird aber nur die hover Zelle gefärbt. nicht die Zeile.
Rolf
Hallo
damit wird aber nur die hover Zelle gefärbt. nicht die Zeile.
Aufgabe war, in einer gehoverten Zeile nur die Zellen (ohne th) umzufärben.
Tschö, Auge
Hallo Auge,
Hm. Ja. Sorry. Hast recht.
Rolf
Hallo,
PS: Ich habe in deinem Posting den zitierten Codeblock repariert.
ups, danke. Erst wollte ich nur den Kommentar zitieren, ließ dann aber noch mehr Kontext drin…
Gruß
Kalk
Vielen lieben Dank!
Eure Antworten waren wirklich sehr hilfreich. Ich habe mir eure Antworten selbstverständlich sehr gründlich durchgelesen und bin begeistert wie ihr das rüber bringt. Ich werde mich heute weiter mit dem Wiki beschäftigen um den Status "moderate Grundlagenkenntnisse" noch zu erreichen. 😀
Jetzt funktioniert alles so wie gewünscht.
Kann ich noch irgendwas tun um eure Bewertungen zu pushen, die Sache mit der Antwort akzeptieren funktioniert irgendwie nicht so richtig bei mir. Braucht man da besondere Rechte?
Ich wünsche euch einen angenehmen Tag!
Viele Grüße
Hallo,
die Sache mit der Antwort akzeptieren funktioniert irgendwie nicht so richtig bei mir.
doch, funktioniert. Schau dir mal die Liste der akzeptierten Antworten beim Ursprungsposting an…
Gruß
Kalk