स्लेटेड हेडर के साथ पीडीएफ टेबल

Question

मैं cfdocument का उपयोग कर कोल्डफ्यूजन में पीडीएफ बना रहा हूं। मुझे हेडर पंक्ति के साथ एक टेबल बनाने की आवश्यकता है ताकि यह पृष्ठ पर फिट हो। यहां एक उदाहरण दिया गया है जिसे मैं पूरा करने की कोशिश कर रहा हूं। मैंने अभी तक पाया है कि HTML या CSS उदाहरणों में से कोई भी काम नहीं किया है। अब मैं सोच रहा हूं कि यह कोल्डफ्यूजन और/या पीडीएफ सृजन के लिए विशिष्ट क्विर्क है। मुझे पता है कि यह कोड सीधे एक समान प्रश्न के उत्तर से आया है, लेकिन यह मेरे पीडीएफ में स्लॉट कॉलम के साथ एक टेबल नहीं बनाता है। यह इसे बनाता है।

//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

आप CF11 या इसके बाद के संस्करण का उपयोग कर रहे हैं? यदि ऐसा है, तो कृपया <cfhtmltopdf> का उपयोग विरासत <cfdocument> के बजाय बहुत बेहतर सीएसएस समर्थन के साथ करें।

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

Answer 2

मैं cfdoucment काफ़ी का उपयोग कर स्टाइल पीडीएफ दस्तावेजों पर काम करते हैं और सीएसएस के साथ परेशानी का एक बहुत कुछ किया है। इतनी सारी सुविधाएं समर्थित नहीं हैं जो पीडीएफ को स्टाइल करने में बहुत आसान बनाती हैं: CSS3 गुण, सीएसएस छद्म तत्व और !important टैग भी दुर्भाग्य से उपयोग नहीं किया जा सकता है।

वहाँ तथापि पर्याप्त चाल और काम arounds है कि आप करने के लिए (कुछ) का उपयोग कर सकते कर वांछित परिणाम हासिल कर रहे हैं, वे आम तौर पर अपने मार्कअप थोड़ा अनुरूपण की आवश्यकता होती है, यहाँ कैसे मैं अपनी समस्या का समाधान के बारे में जाना होगा है:

पहले: सीमावर्ती कोशिकाओं/पंक्तियों के साथ एक टेबल प्राप्त करना सीएफ पीडीएफ के लिए सीएसएस के साथ एक मजेदार काम नहीं है। कि समर्थित नहीं है सीएसएस गुण में से एक .. border-collapse: collapse; इसलिए यदि आप तालिकाओं का उपयोग वहाँ कोशिकाओं के बीच रिक्त स्थान आदि हो जाएगा, तो आप एक मानक तालिका के लिए कुछ इस तरह से खत्म करेंगे:

तो मैं शायद आपकी पीडीएफ सामग्री के लिए <div> का उपयोग करके एक अलग मार्कअप उत्पन्न करेगा और केवल pdf-only कक्षा या कुछ पीडीएफ पर प्रदर्शित करने और अन्यत्र छिपाने के लिए इसमें कुछ जोड़ें।

---

आपके प्रश्नों में 2 समस्याएं हैं जिन्हें सीएसएस की सीमा के कारण ठीक नहीं किया जा सकता है। 1) slanted लाइनें 2) ऊर्ध्वाधर slanted पाठ।

1) slanted लाइनों:

मैं एक पृष्ठभूमि छवि संलग्न द्वारा (हेडर कोशिकाओं को नीचे देखें) और उन्हें कुछ अन्य सीएसएस कोड उम्मीद है कि आसान का पालन करने के है कि के साथ स्थानांतरण तिरछी ब्लॉक बनाने के लिए कर रहा था :

:

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

यहाँ सीएसएस के साथ पूर्ण मार्कअप है

<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> 

सीएसएस:

.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 
} 

यहाँ आप क्या मिलेगा: (यह एक वास्तविक उत्पन्न <cfdocument> का उपयोग कर पीडीएफ है)

ताकि तिरछी हेडर का ख्याल रखता है

---

2) वर्टिकल टेक्स्ट

मैं 2 समाधानों के बारे में सोच सकता हूं, जिनमें से कोई भी आदर्श नहीं है, लेकिन फिर हम सीएफ पीडीएफ स्टाइल कर रहे हैं, इसलिए हमें रचनात्मक होना होगा।

जो आपने अपने प्रश्न (घुमावदार पाठ) में पोस्ट किया है उसे ठीक करने के लिए मुझे विश्वास है कि इसे प्राप्त करने का एकमात्र तरीका ग्रंथों के बजाय छवियों का उपयोग कर रहा है। हाँ मुझे पता है कि यह विशेष रूप से धोखा दे रहा है यदि आपकी टेबल हेडर ग्रंथों के साथ गतिशील होने जा रही है तो यह लगातार काम नहीं करेगा।

तब आप अपने हेडर सेल के अंदर एक और तत्व जोड़ सकते हैं और इसकी पृष्ठभूमि और केंद्र यह स्थिति के रूप में उस छवि को स्थापित करेगा: लेकिन अगर यह सूची बहुत ज्यादा परिवर्तन नहीं होगा आप के रूप में अच्छी छवियों, उदाहरण का उपयोग हो सकता है:

<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; 
} 

तो ग्रंथों के रूप में छवियों का उपयोग करने से काम नहीं चलेगा, तो आप शायद पाठ और और फिर एक रिक्ति प्रत्येक अक्षर के बाद एक लाइन ब्रेक के माध्यम से लूप और यह एक अवरोही फैशन में हर बार बढ़ाने के कर सकते हैं:

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

यह स्पष्ट रूप से पाठ को घुमाता नहीं है, लेकिन यह शीर्षलेख में सामग्री को फिट करना आसान बना देगा।

उम्मीद है कि मदद करता है।