Die horizontalen Linien erhältst du folgendermaßen:
Code: Alles auswählen
tr.hochschule+tr.hochschule1 > *, tr.hochschule1+tr.hochschule > * {
border-top:1px solid red;
}
thead tr > * {
border-bottom:1px solid red;
}
tr.hochschule+tr.hochschule1 betrifft tr.hochschule1, falls sich direkt davor tr.hochschule befand; nach dem Komma kommt die gleiche Regel nochmals, nur gespiegelt. Diese zwei Regeln zusammen passen also auf jeden Farb- bzw. Uni-Wechsel.
x > * betrifft jedes Element, das ein direktes Kind von x ist, hier: alle td- und th-Elemente eines tr-Elements, jedoch nicht das, was in den td- und th-Zellen drinsteckt.
Die Klasse tr.hochschule1 müsstest du HTML-seitig noch bei allen weißen Zeilen einbauen, momentan hast du ja nur <tr class="hochschule"> für die blauen Zeilen.
Weiterhin muss die Titelzeile in einen <thead>-Block eingelagert werden, der Rest in einen <tbody>-Block. Der <thead>-Block bekommt dann seine rote Linie unten.
Diese Methode habe ich allerdings nur erwähnt, weil da mit dem +-Teil ein schöner, umfangreicher CSS-Selektor drinsteckt. Sie hat jedoch einen äußerst unschönen Nachteil: Du musst haufenweise
class="hochschule" bzw.
class="hochschule1" einfügen, bei jeder einzelnen Zeile. Diesen Aufstand kannst du dir sparen, der Block <tbody> lässt sich nämlich mehrmals in einer Tabelle verwenden:
Code: Alles auswählen
<table>
<thead><tr><th>Hochschule</th><th> .. </thead>
<tbody><tr><th>FHTW Berlin</th><td> .. </tbody>
<tbody><tr><th rowspan="3">TU Berlin</th><td> .. </tbody>
<tbody><tr><th rowspan="6">TFH Berlin</th><td> .. </tbody>
</table>
Du legst also einfach um jede Hochschule ein <tbody>-Element. Wir könnten jetzt mit der CSS-Regel
tbody:nth-child(odd) jedem ungeraden Hochschul-<tbody> die blaue Hintergrundfarbe zuweisen, der Bedarf an class-Attributen wäre dann gleich 0.
Leider kennen derzeit weder der IE noch Firefox :nth-child, insofern muss doch noch jedem zweiten <tbody> eine Klasse zugewiesen werden. Aber immerhin sind das schon mal ein Haufen class="hochschule" weniger als derzeit, beispielsweise im Falle von Berlin nur noch zwei statt sieben - von obigem ersten Vorschlag ganz zu schweigen, da wären es satte zehn.
Code: Alles auswählen
tbody.blau tr > * {
color:#003366;
font-weight:bold;
background-color:#BED0DF;
}
tbody tr > * {
border-top:1px solid red;
}
Die rote Linie über jeder Hochschule erhältst du bei dieser Konstruktion ganz einfach, indem du jeden <tbody>-Block ansprichst.
Die blau zu hinterlegenden Hochschulen haben hier die Klasse blau, HTML-seitig also <tbody class="blau">. Sie entspricht deiner derzeitigen Klasse tr.hochschule.
Für die vertikalen Linien gehst du folgendermaßen vor:
Code: Alles auswählen
tbody td {
border-left:1px solid green;
}
Der Uni-Name bildet in deinen Tabellen immer die erste Spalte und braucht deshalb links keine Linie. Das <td>-Element, das den Uni-Namen enthält, änderst du in ein <th>-Element, dadurch wird die erste Spalte einfach und bequem von den Linien ausgenommen.
Ich vermute mal, jetzt sind sämtliche Klarheiten beseitigt ;)