PDF Tabelle mit schrägem Header

Ich arbeite daran, PDF-Dokumente mit cfdoucment zu formatieren und habe viel Ärger mit CSS gehabt. so viele Funktionen werden nicht unterstützt, die das Formatieren der PDFs so viel einfacher machen würden: CSS3-Eigenschaften, CSS-Pseudo-Elemente und nicht einmal das !important -Tag können leider verwendet werden.

Es gibt jedoch genug Tricks und Arbeitsumgebungen, mit denen Sie (etwas) Ihre gewünschten Ergebnisse erzielen können. Normalerweise müssen Sie Ihr Markup ein wenig anpassen. So würde ich Ihr Problem lösen:

Erstens: Eine Tabelle mit umrandeten Zellen / Zeilen zu erstellen, ist mit CSS für CF PDF kein Spaß. Eine der CSS-Eigenschaften, die nicht unterstützt wird, ist border-collapse: collapse; . Wenn Sie also Tabellen verwenden, gibt es Leerzeichen zwischen Zellen usw. Sie erhalten so etwas für eine Standardtabelle:

Ich würde wahrscheinlich ein separates Markup mit <div> nur für Ihren PDF-Inhalt erstellen und eine pdf-only -Klasse oder etwas hinzufügen, um es nur in PDFs anzuzeigen und woanders auszublenden.

Bei Ihren Fragen gibt es zwei Probleme, die aufgrund der Beschränkungen von CSS nicht behoben werden können. 1) schräge Linien 2) vertikaler schräger Text.

1) Schräge Linien:

Ich konnte die schrägen Blöcke erstellen, indem ich ein Hintergrundbild (siehe unten) an die Header-Zellen anfügte und sie mit einem anderen CSS-Code verschob, der hoffentlich leicht zu verstehen ist:

Hier ist das vollständige Markup mit dem CSS:

CSS:

Folgendes erhalten Sie: (Dies ist eine tatsächlich generierte PDF mit <cfdocument> )

so dass kümmert sich um die schrägen Header

2) Vertikaler Text

Ich kann mir zwei Lösungen vorstellen, von denen keine ideal ist, aber wir gestalten CF-PDFs, damit wir kreativ werden müssen.

Um genau das zu erhalten, was Sie in Ihrer Frage gepostet haben (rotierter Text) glaube ich, dass der einzige Weg, dies zu erreichen, die Verwendung von Bildern anstelle von Texten ist. Ja, ich weiß, dass es besonders betrügt, wenn deine Tabellen dynamisch sind und die Headertexte sich ständig ändern, wird das nicht funktionieren. Aber wenn sich diese Liste nicht zu sehr ändert, können Sie auch Bilder verwenden, zum Beispiel:

Sie würden dann ein weiteres Element in Ihrer Kopfzeile hinzufügen und dieses Bild als Hintergrund und Mittelpunkt festlegen:

Wenn Bilder als Texte nicht funktionieren, können Sie vielleicht den Text und und einen Zeilenumbruch nach jedem Buchstaben gefolgt von einem Leerzeichen durchlaufen und ihn jedesmal aufsteigend skalieren:

Dadurch wird der Text offensichtlich nicht gedreht, aber es wird einfacher, den Inhalt in den Header einzufügen.

Ich hoffe, das hilft.