Apex Code Development You need to sign in to do that
Don't have an account?
MandyKool repeating table header
Hi,
I have a VF page; which I am rendering as a PDF. In the page; I have a table which displays "QuoteLineItems".
I want that the table header should be repeated if the contents of "Table" goes over a page.
After doing research I found out that there is a css property which can be used to achieve this. But when I try to implement the solution it is not working. I have used following code(just a part of HTML)
Css that I have used -
<style>
thead { display: table-header-group;}
</style>
VF Page Code -
<table border="0" width="100%" id="table4">
<thead>
<tr>
<th bgcolor="#C0C0C0"><font face="Arial">{!$Label.quotePosition}</font></th>
<th bgcolor="#C0C0C0"><font face="Arial">{!$Label.quoteDescription}</font></th>
<!--<td bgcolor="#C0C0C0"><font face="Arial">Image</font></td>-->
<th bgcolor="#C0C0C0"><font face="Arial">{!$Label.quoteQuantity}</font></th>
<th bgcolor="#C0C0C0"><font face="Arial">{!$Label.quoteTotalPerPosition}</font></th>
</tr>
</thead>
<tr>
<apex:repeat value="{!lstQuoteLineItems}" var="quoteLineItemObj">
<tr>
<td style="vertical-align:top">{!quoteLineItemObj.Position__c}</td>
<td style="vertical-align:top">{!quoteLineItemObj.Description}<br/>
<apex:outputField value="{!quoteLineItemObj.Product_Detail__c}"/>
</td>
<td style="vertical-align:top"><apex:outputText value=" {!quoteLineItemObj.Quantity}" /></td>
<td style="vertical-align:top"><apex:OutputField value=" {!quoteLineItemObj.Total_Per_Position__c}"/></td>
</tr>
<tr><td><br/></td></tr>
</apex:repeat>
</tr></table>
Does anybody implemented this sought of functionality; if yes, could you please share your thought or tell me what I am doing wrong here!!
Thanks in advance!!
Checkout this link and I think you will get an idea how to implement ;)
http://wiki.developerforce.com/page/Creating_Professional_PDF_Documents_with_CSS_and_Visualforce
Hi,
You can use the below code for repeat the header in PDF
<head>
<style>
pre
{
white-space: -moz-pre-wrap; /* Mozilla, supported since 1999 */
white-space: -pre-wrap; /* Opera 4 - 6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* CSS3 - Text module (Candidate Recommendation) http://www.w3.org/TR/css3-text/#white-space */
word-wrap: break-word; /* IE 5.5+ */
}
@page :first
{
margin-top:0%;
@top-center
{
content: element(header2);
}
}
@page
{
margin-top: 15%;
@top-center
{
content: element(header1);
}
@bottom-right
{
content: "Page: " counter(page) " / " counter(pages);font-size: 80%;
}
}
div.header1
{
position: running(header1);
width:703px;
padding-left:9px;
}
div.header2
{
width:700px;
padding-bottom:0px;
padding-left:2px;
}
</style>
<style>
.table1Value{color: #333333; font-size: 70%;text-align: center;border-bottom:0px double #605E5E;}
.table2Value{color: #333333; font-weight: Strong;font-size: 70%;text-align: center;}
.tableNValue{color: #333333;font-size: 70%;text-align: center;border-bottom-style: solid;border-color:#605E5E;border-width:1px;}
.table3Value{color: #333333; font-weight: Strong;font-size: 70%;text-align: center;border-bottom-style: solid;border-color:#605E5E;border-top-style: solid;border-width:1px;}
.closLevel{color: white; font-weight: Strong;font-size: 60%;text-align: left;background-color: #A8A5A5;}
.roadClose{font-weight: Bold;font-size: 90%;}
.tableHValue{color: white; font-weight: Strong;font-size: 70%;text-align: center;background-color:#264D82;}
.ttt{padding-top:4px;padding-left:4px;padding-bottom:4px;}
.closedt{padding-top:4px;padding-left:4px;padding-bottom:4px;}
.closet{padding-top:4px;padding-left:4px;padding-bottom:4px;}
.rowtotal{background-color: #d9d9d9;text-align:left;font-size:11px; }
</style>
</head>
<div class="header2" id="logo" width="100%">
<table width="100%" id="logoTable" border="">
<tr width="100%">
<td width="50%" height="60" ><apex:image url="{!url2}" id="logo1" height="60" width="100" rendered="{!display}"/></td>
<td width="50%" align="right" height="35"><apex:image url="{!url1}" id="logo2" height="35" width="150"/></td>
</tr>
<tr width="100%">
<td class="roadClose" align="center" width="100%" colspan="2">{!fundManager}<br/>"Road To Close"</td>
</tr>
</table>
<table width="100%" class="tableHValue" border="">
<tr valign="bottom">
<th width="15%" align="left">Account</th><th width="12%">Location</th><th width="15%">Coverage</th><th width="12%">Status</th><th width="10%">Probability Weighted </th><th width="26%">Next Steps</th>
</tr>
</table>
</div>
Change the red marks with your column name
Did this answer your question? If not, let me know what didn't work, or if so, please mark it solved.
Hi Kulkarni,
I understand that you are trying to repeat the header in every page and it should be repeated only when the number of pages increases. I would suggest you to refer this code which defines the header as a separate division which will repeat based on the number of pages.
<div class="header">
<div>
<table width="100%" height = "100%" border="0" cellspacing="0" cellpadding="0">
<td width="45%" align="right">
<img style="WIDTH:120px; HEIGHT: 50px" src='{!URLFOR($Resource.Logo)}' title="logo" />
</td>
</table>
</div>
</div>
Hope this will help you, kindly mark it as a solution if it helps you so that other will also be able to see the solution.
You can revert in case of any clarifications.
Regards,
Sunay
KVP Business Solutions
Hello Kulkarni,
I have the exact same requirement as you and was wondering if you finally found a solution ...
Could you repeat the header on each page when rendering the VF Page in PDF ?
Thank you very much.
Hi,
Yes its quite possible; I referenced this link
http://wiki.developerforce.com/page/Creating_Professional_PDF_Documents_with_CSS_and_Visualforce
Hope you will be able to solve your issue using this..
Well, I don't know if it will do the trick but you can try:
for the HTML code :
<table> <thead> <tr> <th> ..... </th> <th> ..... </th> <th> ..... </th> </tr> </thead> <tbody> <tr> <th> ..... </th> <th> ..... </th> <th> ..... </th> </tr> </tbody> </table>And for the CSS. (between style tags):
table {-fs-table-paginate: paginate;}It worked for me (I'm using version 25 of visualforce).
Cheers!
You won't believe how long I have been looking for the solution to repeat table headers on consequent pages :-)
Thanks for the suggestion, it works !