1

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?

Improve this question
1
  • 2
    Can you edit your question to include your visualforce page? @page is the right CSS at-rule to use, but we'll need to see your page (or at the very least, the relevant CSS) to be able to give any help.
    – Derek F
    Feb 9, 2017 at 14:59

1 Answer 1

Reset to default
0

I know this is 5 years old, but for anyone that comes here looking for an answer, this is what worked for me after hours of trying:

Your starting point was this:

  <table border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td style="border-right: 1pt solid #001fa4;">text</td>
        <td >text</td>
      </tr>
  </table>

If you tick in extra tables and do the border at the table level, then it works. For some reason it doesn't work on td level.

  <table border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td> <!-- border styling was here before -->
          <table style="border-right: 1pt solid #001fa4;">
            <tr>
              <td>text</td>
            <tr>
          <table>
        </td>
      </tr>
  </table>
Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .