+ Start a Discussion
hylim1215hylim1215 

Visualforce - missing table border in repeat header PDF

I have developed a Visualforce page to render in PDF and i use @page css for my repeating header and my header content contain a table with border-right:1px solid.

this is my CSS:
 
html * {
  font-family: Arial Unicode MS;
  font-size:12px;
}

@page {
  size: A4;
  margin: 25pt .5in .5in .5in;
  margin-top:220px;
  margin-bottom:130px;

  @top-left{
    content: element(header-left);
  }
  @top-right{
    content: element(header-right);
  }
  @bottom-left {
    content: element(footer-left);
  }
  @bottom-right {
    content: element(footer-right);
  }
  @top-center{
    content: element(header-content);
  }
  @bottom-center{
    content: element(footer-content);
  }
}

@page :first{
  size: A4;
  margin: 25pt .5in .5in .5in;
  margin-top:190px;
  margin-bottom:130px;

  @top-center{
    content: element(header-cover);
  }
  @bottom-center{
    content: element(footer-cover);
  }

}

div.header-right {
  position: running(header-right);
  display: block;
  padding: 10px;
}
div.header-left {
  position: running(header-left);
  display: block;
  padding: 10px;
  font-size:40px;
}
div.header-cover {
  position: running(header-cover);
  display: block;
  padding: 10px;
}

div.header-content {
  position: running(header-content);
  display: block;
  padding: 10px;
}


div.footer-content {
  position: running(footer-content);
  padding: 10px;
  display: block;
}
div.footer-cover {
  position: running(footer-cover);
  padding: 10px;
  display: block;
}

div.footer-right {
  position: running(footer-right);
  padding: 10px;
  display: block;
}

td.pageHeaderCompany{ /*****NEW*****/
  text-align:left;
  font-weight: bold;
  font-size:20px;
  font-family:sans-serif;
  color:#83bc34;
  letter-spacing:normal;
  vertical-align: top;
}


td.footerLabel{
  font-size: 10px;
  text-align:right;
}
td.footerContent{
  font-size: 10px;
  text-align:left;
  padding-left:15px;
}

tr.pageHeader{ /*****NEW*****/
  font-size:12px;
  color:#001fa4;
  letter-spacing:normal;
  vertical-align: top;
}

tr.stdstyle{
  text-align:left;
  letter-spacing:normal;
  vertical-align: top;
}

this my visualforce page:
 
<html>
<head>
  <style type="text/CSS" media="print">
    <apex:outputPanel layout="none" rendered="{!!(Quote.status == 'Approved')}">
      .watermark {
        background-repeat: repeat;
        background-image: url("{!URLFOR($Resource.Quote_Watermark)}");
      }
    </apex:outputPanel>
  </style>
</head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

<body class="watermark">
    <div class="header-content">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
  <tr>
    <td style="width:60%;">&nbsp;</td>
    <td style="width:40%; align:right">
      <table border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td style="border-right: 1pt solid #001fa4;">text</td>
            <td >text</td>
          </tr>
          <tr>
            <td style="border-right: 1pt solid #001fa4;">text2</td>
            <td >text2</td>
          </tr>
      </table>
    </td>
  </tr>
</table>
</div>

<page body content here../>  
</body>
</html>

The header is ok on the first page, but when on the second page and beyond, the table border is gone. Just pure table & content without border.
How can i remain the table border for every page?
 
Nishad KNishad K
Hi,
Try the below visualforce page :
<html>
<head>
  <style>
            @page {
                margin-top: 0.65in;
                margin-bottom: 0.5in;
                margin-left: 0.5in;
                margin-right: 0.5in;
                page-break-inside: avoid;
              tr {
                    page-break-inside: avoid !important;
                }
            }
            
            .assetTable,
            table * {
                border: 0;
            }
            table {
                -fs-table-paginate: paginate;
                   }
            
            tr {
                page-break-inside: avoid !important;
            }
            
            .tableStyle td {
                text-align: center;
                border: solid 1px;
                border-left: 0;
                margin-top: -1px;
            }
            
            .tableStyle th {
                border: solid 1px;
                text-align: center;
            }
            
             .tableStyle td:first-child {
                border-left: 1px solid;
            }
        </style>
</head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

<body class="watermark">
    <div class="header-content">
<table border="0" width="100%" cellspacing="0" cellpadding="0" class="tableStyle">
  <tr>
    <td style="width:60%;">&nbsp;</td>
    <td style="width:40%; align:right">
      <table border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td style="border-right: 1pt solid #001fa4;">text</td>
            <td >text</td>
          </tr>
          <tr>
            <td style="border-right: 1pt solid #001fa4;">text2</td>
            <td >text2</td>
          </tr>
      </table>
    </td>
  </tr>
</table>
</div>

<page body content here../>  
</body>
</html>

Regards,