HTML Table – Zeile durchstreichen – linethrough / strikethrough

Beim Redesign der EPU / KMU Webanwendung foxyoffice wollte ich stornierte Rechnungen oder Buchungen besser darstellen und einfach die Zeile in der HTML Tabelle die storniert wurde mit einem roten Strich kennzeichnen und so den Datensatz canceln. Leider funktioniert die CSS Anweisung text-decoration: line-through bei Tabellen nicht. Nur beim Text der jeweiligen Zelle direkt. Das erzeugt dann aber viele kleine einzelne Striche.

Eine Hintergrundgrafik wäre die Lösung, da es mir aber zuviel Aufwand war ein Grafikprogramm zu starten, eine Grafik zu zeichen, abspeichern und dann mit CSS importieren bin ich über einen Interessanten Dienst gestoßen. Mit Patternify ist es möglich, kleine Grafiken direkt im Browser zu Zeichnen und man bekommt dann auch gleich den HEX Code zum direkten einbinden ins CSS. Mein Beispiel für die Linie in der Tabelle sieht so aus:

tr.canceled td {
    font-style: italic;

    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWP4JST0HwAFRgIefzRCKwAAAABJRU5ErkJggg==');
    background-repeat: repeat-x;
    background-position: 50% 50%;
}

Das Ergebnis sieht dann so aus:

html-table-row-line-through