Tabellenzeilen mit Rand

[Rolf B]

Hallo Matthias,

kann man so machen, muss man aber eventuell nicht.

Wenn die Table mit collapsed borders arbeitet (CSS: border-collapse: collapse), dann kann man die für eine logische Strukturierung einer Table vorgesehenen Elemente thead, tbody und tfoot verwenden. Bei collapsed borders sind border-Angaben, die man für diese Elemente setzt, sichtbar. Bei separate borders nicht.

Wenn die Table mehrere Bereiche hat, zwischen denen Striche zu setzen sind, kann man auch mehrere tbody-Elemente verwenden. thead und tfoot sind nur einmal erlaubt.

Das heißt:

benötige zwischen manchen Zeilen eine Linie als Trenner

• die Überschrift-tr in ein thead einschließen
• die Bilder-tr in tbody einschließen. Sollen zwischen bestimmten Bilder-tr Striche sein, an der Stelle einen neuen tbody beginnen
• nach Bedarf noch einen tfoot-Bereich hinzufügen.

Und dann für thead und tbody ein border-bottom setzen.

Wenn border-collapse:separate verwendet werden soll, dann erscheinen die borders auf thead/tbody/tfoot nicht. Man kann sich dann so behelfen:

thead tr:last-of-type th  { 
   border-bottom: 1px solid red;
}

tbody tr:last-of-type td { 
   border-bottom: 1px solid red;
}

bzw. man verwendet :first-of-type, wenn border-top gebraucht wird. Dieser Behelf funktioniert für beider border-collapse Modi, man kann ihn also auch generell verwenden.

Rolf