Jörg Giera: Tabellenformatierung - Zugriff auf nicht verwendete Klasse

Beitrag lesen

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

akzeptierte Antworten