PDF Tabelle mit schräger Kopfzeile

Question

Ich erstelle PDFs in ColdFusion mit cfdocument. Ich muss einen Tisch mit der Kopfzeile schräg stellen, damit alles auf die Seite passt. Hier ist ein Beispiel für das, was ich erreichen möchte. Keines der HTML- oder CSS-Beispiele, die ich bisher gefunden habe, hat funktioniert. Jetzt frage ich mich, ob das eine Besonderheit für ColdFusion und/oder PDF-Erstellung ist. Ich weiß, dass dieser Code direkt von einer Antwort auf eine ähnliche Frage kam, aber er erstellt keine Tabelle mit schrägen Spalten in meinem PDF. Es schafft dies.

//CSS 
* { 
    box-sixing: border-box; 
} 

.outerDiv { 
    background: grey; 
    height: 200px; 
    width: 100px; 
    border: 1px solid black; 
    border-bottom: 0; 
    border-left: 0; 
    transform: skew(-30deg) translateX(58%); 
} 

th:first-child .outerDiv { 
    border-left: 1px solid black; 
    position: relative; 
} 

.innerDiv { 
    position: absolute; 
    width: 250px; 
    height: 85px; 
    bottom: -34%; 
    left: 10px; 
    transform: skew(30deg) rotate(-60deg); 
    transform-origin: 0 0; 
    text-align: left; 
} 

body, 
html { 
    height: 100%; 
} 

body { 
    display: flex; 
    justify-content: center; 
} 

table { 
    border-collapse: collapse; 
} 

td { 
    border: 1px solid black; 
} 

.well { 
    min-height: 20px; 
    padding: 5px; 
    margin-bottom: 10px; 
    background-color: #f5f5f5; 
    border: 1px solid black; 
    border-radius: 3px; 

} 

.well_tight { 
    padding: 3px; 
    margin-bottom: 5px; 
    background-color: #f5f5f5; 
    border: 1px solid black; 
    border-radius: 3px; 

} 

//ColdFusion/HTML 

<cfdocument format="pdf" name="#formname#" pagetype="letter" marginleft=".25" marginright=".25" margintop=".25" marginbottom=".5"> 

<cfoutput><style type="text/css">@import "/mach15/web/assets/css/formPDF.css";</style></cfoutput> 


<div class="well"> 
    <table cellpadding="0" cellspacing="0"> 
      <tr> 
       <th> 
        <div class="outerDiv"> 
        <div class="innerDiv">This is first column header</div> 
        </div> 
       </th> 
       <th> 
        <div class="outerDiv"> 
        <div class="innerDiv">This is second column header</div> 
        </div> 
       </th> 
       <th> 
        <div class="outerDiv"> 
        <div class="innerDiv">This is third column header</div> 
        </div> 
       </th> 
      </tr> 
      <tr> 
       <td> 1 </td> 
       <td> 2 </td> 
       <td> 3 </td> 
      </tr> 
      <tr> 
       <td> 4 </td> 
       <td> 5 </td> 
       <td> 6 </td> 
      </tr> 
      <tr> 
       <td> 7 </td> 
       <td> 8 </td> 
       <td> 9 </td> 
      </tr> 
      <tr> 
       <td> 10 </td> 
       <td> 11 </td> 
       <td> 12 </td> 
      </tr> 
    </table> 
</div> 

Answer 1

Verwenden Sie CF11 oder höher? Wenn ja, verwenden Sie bitte <cfhtmltopdf> mit viel besserer CSS-Unterstützung anstelle der alten <cfdocument>.

https://helpx.adobe.com/coldfusion/cfml-reference/coldfusion-tags/tags-g-h/cfhtmltopdf.html

Answer 2

Ich arbeite an Dokumenten Styling PDF mit cfdoucment recht viel und haben eine Menge Ärger mit CSS hatte. so viele Features werden nicht unterstützt, die das Gestalten 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 Workarounds, die Sie (etwas) erreichen die gewünschten Ergebnisse verwenden können, benötigen sie in der Regel Ihr Markup ein bisschen Anpassen Hier ist, wie ich über die Lösung Ihres Problems gehen würde:

Erstens: Eine Tabelle mit umrandeten Zellen/Zeilen zu erstellen, ist mit CSS für CF PDF kein Spaß. Einer der CSS-Eigenschaften, die nicht unterstützt wird ist border-collapse: collapse; also, wenn Sie Tabellen dort verwenden Räume zwischen den Zellen sein, etc .. Sie mit so etwas wie dies am Ende dann für eine Standardtabelle:

Also ich würde wahrscheinlich ein separates Markup unter Verwendung von <div> nur für Ihren PDF-Inhalt erstellen und fügen Sie eine pdf-only Klasse oder etwas, um es nur in PDFs anzuzeigen und woanders verstecken.

---

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

1) schraffiert:

konnte ich die schrägen Blöcke erstellen, indem ein Hintergrundbild (siehe unten) an die Kopfzellen angebracht und sie zusammen mit einigem anderen CSS-Code Verschiebung, die hoffentlich leicht zu folgen :

.th { 
    padding:10px 0; 
    height: 200px; 
    position: relative; 
    left:50px; 
    border-top: 1px solid #000; 
    background:url(../img/line.gif) no-repeat right center; 
} 

Hier ist die vollständige Markup mit dem CSS:

<div class="table-wrapper pdf-only"> 
    <div class="row th-row"> 
    <div class="th th1">&nbsp;</div> 
    <div class="th th2">&nbsp;</div> 
    <div class="th th3">&nbsp;</div> 
    <div class="th th4">&nbsp;</div> 
    </div> 
    <div class="row td-row first-td-row"> 
    <div class="td td1">Row 1</div> 
    <div class="td td2"><span class="td-border"></span>r1c1</div> 
    <div class="td td3"><span class="td-border"></span>r1c2</div> 
    <div class="td td4"><span class="td-border"></span>r1c3<span class="td-last-border"></span></div> 
    </div> 
    <div class="row td-row"> 
    <div class="td td1">Row 2</div> 
    <div class="td td2">r2c1</div> 
    <div class="td td3">r2c2</div> 
    <div class="td td4">r2c3</div> 
    </div> 
</div> 

CSS:

.table-wrapper { 
    width:75%; // so that the last column won't get cut off 
    position: relative; 
} 

.row { 
    width: 100%; 
} 

.td-row { 
    border-bottom:1px solid #000; 
    width: 100%; 
    position: relative; 
} 

.td { 
    padding:15px 0; 
    text-indent: 10px; 
    position: relative; 
} 

.th { 
    padding:10px 0; 
    height: 200px; 
    position: relative; 
    left:50px; // this should the same as the width of line.gif 
    border-top: 1px solid #000; 
    background:url(../img/line.gif) no-repeat right center; 
} 


/* Adjust the td, th widths below . You can even add different % to 
different cols as long as the total adds up to 100% per row. */ 

.td, .th { 
    width: 25%; 
    float: left; 
} 

.th1 { 
    border-top: 0; 
} 

span.td-border { 
    height:1000px; 
    width: 1px; 
    position: absolute; 
    border-left: 1px solid #000; 
    left: 0; 
    top:0; 
} 
span.td-last-border { 
    height:1000px; 
    width: 1px; 
    position: absolute; 
    border-left: 1px solid #000; 
    right: -10px; 
    top:0; 
} 

.first-td-row { 
    border-bottom: 1px solid #000 
} 

Hier ist, was Sie bekommen: (dies ist eine tatsächliche erzeugte PDF-Datei mit <cfdocument>)

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

---

2) Vertical Text

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

Um genau das zu erhalten, was Sie in Ihrer Frage geschrieben 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 diese Liste nicht zu viel ändern könnten Sie auch Bilder verwenden, zB:

Sie würden dann ein weiteres Element in Ihrer Header-Zelle hinzufügen und das Bild als Hintergrund und in der Mitte positionieren:

<div class="th th1"> 
    <div class="text"></div> 
</div> 

.th .text { 
    width:100%; 
    height:100%; 
    position:absolute; 
} 

.th1 .text { 
    background-image:url(../img/col1-text.gif) no-repeat center center; 
} 

Wenn Bilder als Texte mit nicht funktionieren, können Sie vielleicht Schleife durch den Text und und ein Zeilenumbruch nach jedem Buchstaben gefolgt von einem Leerzeichen und es jedes Mal in einer absteigenden Art und Weise erhöhen:

&nbsp;&nbsp;&nbsp;1<br/> 
&nbsp;&nbsp;l<br/> 
&nbsp;o<br/> 
C<br/> 

Das dreht natürlich nicht den Text, aber es wird es einfacher machen, den Inhalt in der Kopfzeile anzupassen.

Hoffe, dass hilft.