Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Rick MacGuiganRick MacGuigan 

PDF rendering and pagination using -fs-table-paginate

I added the flying saucer specific CSS to maintain the header of a dataTable when a table continues after a page break but now the table borders show double lines. Below a screen shot along with the visualforce page and static CSS file. Is there a cleaner way to implement continual table dataTable headers and how can I remove the double border to just one line ?

User-added image

  
CSS file; 

.allPDFdatatables {
    text-align: right;
    font-family: 'Arial'; 
    font-size: 75%;   
    vertical-align: middle;
    border-collapse: collapse; 
    border: 1px solid black;
    padding: 5px 5px 5px 5px;
    color: blue;
    border-bottom: 1px solid #ddd;
    -fs-table-paginate: paginate;
    border-spacing: 0;	
}

.allPDFdatarows {
    text-align: right;
    font-family: 'Arial'; 
    font-size: 75%;   
    vertical-align: middle;
    border-collapse: collapse; 
    border: 1px solid black;
    padding: 5px 5px 5px 5px;
    color: black;    
    border-bottom: 1px solid #ddd;
}

.allPDFdatacols {
    border-collapse: collapse; 
    border: 1px solid black;
    }

.alldatatables {
    text-align: right;
    font-family: 'Arial'; 
    font-size: 90%;   
    vertical-align: middle;
    border-collapse: collapse; 
    border: 1px solid black;
    padding: 5px 5px 5px 5px;
    color: blue;
    border-bottom: 1px solid #ddd;	
}

.alldatarows {
    text-align: right;
    font-family: 'Arial'; 
    font-size: 90%;   
    vertical-align: middle;
    border-collapse: collapse; 
    border: 1px solid black;
    padding: 5px 5px 5px 5px;
    color: black;    
    border-bottom: 1px solid #ddd;

}

.alldatacols {
    border-collapse: collapse; 
    border: 1px solid black;
    }




.odd {
 border-bottom: 1px solid #000;
 padding: 1px 1px 2px 2px;
 background-color: #ccf2ff;
}

.even {
 border-bottom: 1px solid #000;
 padding: 1px 1px 2px 2px;
 background-color: white;
}

@page {
/* Landscape orientation */
size: ledger landscape;

/* Put page numbers in the top right corner of each
   page in the pdf document. */
@bottom-right {
 content: "Page " counter(page) "of " counter(pages);
}
   margin-top:1cm;
   margin-left:1cm;
   margin-right:1cm;
   margin-bottom:1cm;
 
}

Visual Force : 
  <apex:pageBlockSection columns="1" id="section8" title="Bound Terrorism & Cyber Information" showHeader="true" rendered="{!NOT(TerrorCyberSectionList.size == 0)}" > 
 
             <apex:outputPanel id="out8">
                <apex:actionstatus startText="loading...">
                    <apex:facet name="stop" >
                        <apex:outputPanel >
                         <apex:outputText style="font-style:italic;color:blue" value="Terrorism" />
                            <apex:dataTable id="dt8a"  styleClass="allPDFdatatables" headerClass="allPDFdatacols" columnClasses="allPDFdatacols" rowClasses="allPDFdatarows" value="{!TerrorCyberSectionList}" var="tc" rules="all" cellpadding="5" >
                            
                                <apex:column value="{!tc.Name}" headerValue="Contract"/>
                                <apex:column value="{!tc.Terror_Limit_Amount__c}" headerValue="Additional Limit Maiden Share"/>
                                <apex:column value="{!tc.Terror_Limit_Type__c}" headerValue="Limit Type"/> 
                                <apex:column value="{!tc.Terror_Limit_Description__c}" headerValue="Description (Terrorism)"/>
         
                            </apex:dataTable>  
                         <br></br>                           
                         <apex:outputText style="font-style:italic;color:blue" value="Cyber" /> 
                           <apex:dataTable id="dt8b" styleClass="allPDFdatatables" headerClass="allPDFdatacols" columnClasses="allPDFdatacols" rowClasses="allPDFdatarows" value="{!TerrorCyberSectionList}" var="tc" rules="all" cellpadding="5" >
                                <apex:column value="{!tc.Name}" headerValue="Contract"/>
                                <apex:column value="{!tc.Cyber_Limit_Amount__c}" headerValue="Additional Limit Maiden Share"/>
                                <apex:column value="{!tc.Cyber_limit_Type__c}" headerValue="Limit Type"/> 
                                <apex:column value="{!tc.Cyber_Limit_Description__c}" headerValue="Description (Cyber)"/>
                                                           
                            </apex:dataTable> 

                                                    
                        </apex:outputPanel>
                    </apex:facet>
                </apex:actionstatus>
                
            </apex:outputPanel>

 </apex:pageBlockSection>


 
SonamSonam (Salesforce Developers) 
Hi Rick,

I checked your code and made some changes which resulted in single boarder for the table:



.<b>allPDFdatatables</b> {
    text-align: right;
    font-family: 'Arial'; 
    font-size: 75%;   
    vertical-align: middle;
    border-collapse: collapse; 
    border: 1px solid black;
    padding: 5px 5px 5px 5px;
    color: blue;
    <b>-fs-table-paginate: paginate;</b>
    border-spacing: 0;
    cellspacing 0;
    
}

<b>.allPDFdatarows</b> {
    text-align: right;
    font-family: 'Arial'; 
    font-size: 75%;   
    vertical-align: middle;
    border-collapse: collapse; 
    border: 1px solid black;
    padding: 5px 5px 5px 5px;
    color: black; 
    cellspacing 0;
    
}

<b>.allPDFdatacols</b> {
    border-collapse: collapse; 
    border: 1px solid black;
    cellspacing 0;
    
    }

.alldatatables {
    text-align: right;
    font-family: 'Arial'; 
    font-size: 90%;   
    vertical-align: middle;
    border-collapse: collapse; 
    border: 1px solid black;
    padding: 5px 5px 5px 5px;
    color: blue;
    border-bottom: 1px solid #ddd;
    cellspacing 0;
  
}

.alldatarows {
    text-align: right;
    font-family: 'Arial'; 
    font-size: 90%;   
    vertical-align: middle;
    border-collapse: collapse; 
    border: 1px solid black;
    padding: 5px 5px 5px 5px;
    color: black;    
    border-bottom: 1px solid #ddd;

}

Please make the required changes in you code and let me know the result.

 
Rick MacGuiganRick MacGuigan
Sonam, thanks for your response. However these changes still display the double border. Below is the current CSS using your recommendations:
  
tr:hover {background-color: #f5f5f5}

.allPDFdatatables {
    text-align: right;
    font-family: 'Arial'; 
    font-size: 75%;   
    vertical-align: middle;
    border-collapse: collapse; 
    border: 1px solid black;
    padding: 5px 5px 5px 5px;
    color: blue;
    -fs-table-paginate: paginate;
    border-spacing: 0;
    cellspacing 0;	
}

.allPDFdatarows {
    text-align: right;
    font-family: 'Arial'; 
    font-size: 75%;   
    vertical-align: middle;
    border-collapse: collapse; 
    border: 1px solid black;
    padding: 5px 5px 5px 5px;
    color: black;    
    cellspacing 0;
}

.allPDFdatacols {
    border-collapse: collapse; 
    border: 1px solid black;
	cellspacing 0;
    }

.alldatatables {
    text-align: right;
    font-family: 'Arial'; 
    font-size: 90%;   
    vertical-align: middle;
    border-collapse: collapse; 
    border: 1px solid black;
    padding: 5px 5px 5px 5px;
    color: blue;
    border-bottom: 1px solid #ddd;
	cellspacing 0;	
}

.alldatarows {
    text-align: right;
    font-family: 'Arial'; 
    font-size: 90%;   
    vertical-align: middle;
    border-collapse: collapse; 
    border: 1px solid black;
    padding: 5px 5px 5px 5px;
    color: black;    
    border-bottom: 1px solid #ddd;

}

.alldatacols {
    border-collapse: collapse; 
    border: 1px solid black;
    }




.odd {
 border-bottom: 1px solid #000;
 padding: 1px 1px 2px 2px;
 background-color: #ccf2ff;
}

.even {
 border-bottom: 1px solid #000;
 padding: 1px 1px 2px 2px;
 background-color: white;
}

@page {
/* Landscape orientation */
size: ledger landscape;

/* Put page numbers in the top right corner of each
   page in the pdf document. */
@bottom-right {
 content: "Page " counter(page) "of " counter(pages);
}
   margin-top:3cm;
   margin-left:2.54cm;
   margin-right:2.54cm;
   margin-bottom:3cm;

   margin-top:1cm;
   margin-left:1cm;
   margin-right:1cm;
   margin-bottom:1cm;
 
}