HTML/CSS: Drucken von Tabellen mit Gitternetzlinien

Druckt man eine Tabelle auf einer HTML-Seite aus, so fehlen mitunter die Gitternetzlinien. Für die übersichtliche Darstellung sind diese jedoch unverzichtbar. Mit ein wenig CSS überreden wir den Drucker, gefälligst Linien zwischen die Tabellenzeilen zu drucken.

Ich bin ja seit einigen Wochen mehr oder weniger sporadisch dabei eine Webseite zu entwickeln, die es dem hiesigen Familientreff erlaubt, anstehende Basare mehr oder wenige komfortabel abzuwickeln. Dazu gehört u.a. auch das Ausdrucken von Listen. Ohne Papier geht es wohl doch nicht. (Meiner Meinung nach schon, aber das ist eine andere Sache.)

Das Ende des Basar ist nahe, alle kauflustigen Besucher sind abkassiert und nun geht’s ans Abrechnen. Schließlich wollen die Verkäufer ja ihr Geld sehen. Und außerdem wäre wohl nicht schlecht, wenn sie auch noch sehen würden, welche von ihren Spenden verkauft wurden und welche nicht.

Eine Liste der Sachen, die quasi als Abrechnung ausgedruckt wird, wäre also nicht schlecht. Am Rechner stelle ich die Artikelliste des Verkäufers in einem DIV-Layer dar. Dazu gesellt sich ein Druck-Link, der wiederum ein jQuery-Plugin anspricht, welches nur den Layer druckt. Geile Sache, auf die ich in Kürze noch separat eingehen werde. Bis hierhin klappte auch alles wunderbar. Nur auf dem Ausdruck waren keine Linien zu sehen. Wer schon einmal eine recht üppige Tabelle auf Papier vor sich hatte, deren Zeilen nicht irgendwie separiert sind, der wird verstehen wie schnell da der Überblick verloren geht und die Augen sich auf dem Weg von links nach recht verirren.

Die Lösung liegt im CSS-Attribut: border-collapse.
Mit der Eigenschaft border-collapse können die Rahmen von Tabellenzellen miteinander verbunden werden. Dabei entfällt der Abstand zwischen den Tabellenzellen (cellspacing). Und das versteht dann offenbar auch der Drucker.

Hier der Code, der letzlich dazu führt, dass meine Artikelliste mit Zeilenlinien ausgedruckt wurde:

table {
 width: 100%;
 border-collapse:collapse;
 border: 2px solid #000;
}

tr {
 border-bottom: 1px solid #000;
}

thead {
 line-height: 50px;
}

Dieser Code steht üblicherweise in einem Stylesheet für die Prinausgabe. Also im <HEAD>-Bereich kommt dann folgendes:

<link rel="stylesheet" href="css/drucken.css" type="text/css" media="print" /> 

Gewußt wie … 🙂

Hast du weitere Ideen, wie man den Listendruck über HTML/CSS/jQuery hübsch auffrischen kann? Ich freue mich auf Kommentare und Tipps darin. 🙂

2 Antworten

  1. SoRoom sagt:

    Danke genau was ich gesucht habe 🙂

  1. 6. August 2010

    […] Ich hatte es heute ja mit Listen. Ganz speziellen Listen. HTML-Listen, die sich gegenüber Druckern recht unfair benehmen und einfach diese hübschen Linien ausradieren, sobald sie mit einem Drucker in Berührung kommen. Wie ich aufgezeigt habe, lassen sich derart kranke Listen mit CSS heilen. […]

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.