+ Start a Discussion
MandyKoolMandyKool 

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

 

_Prasu__Prasu_

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

Navatar_DbSupNavatar_DbSup

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. 

Sunay - KVP Bus SolnsSunay - KVP Bus Solns

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

jhelblingjhelbling

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.

MandyKoolMandyKool

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

Didier HDidier H

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! 

 

 

 


Robert van GentRobert van Gent

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 !

Aruna VasahanAruna Vasahan
@DIdIer H, After Spending nearly 2weeks finally I got the solution for my problem. Thanks a lot man :D