Skip to main content
Topics#VisualforceJohn Neff の質問
John Neff (Ring2Media) が「#Visualforce」で質問
2015年10月28日 22:11

Formatting table gridlines in Visualforce email template

Hello, 

I have a visualforce email template that renders a PDF attachment, and within that attachment is a table.  However, the Table that is displayed on the PDF is actual three separate tables  stacked on top of eachother to function as one.  From a functionality standpoint it is doing exactly what I need it to do, but it looks absolutely terrible. How can I appy styling to my tables to that the columns are all the exact width (and in theory all align)? 

Here is what the table currently looks like: 

Formatting table gridlines in Visualforce email template

And here is the markup behind it: 

 

<messaging:attachment renderAs="PDF" filename="netorder.pdf">
<html>
<head>
<style>
@page{
size: A4 landscape;
}
</style>
</head>
<body style="font-family: 'Trebuchet MS'">
       <div align="center">
        <img src="{!$Resource.CashR2MLogo}" /> <br/>
               </div>  
<apex:repeat value="{!relatedTo.Post_Logs__r}" var="buyline">
<div  style="page-break-after: always">
<apex:outputPanel rendered="{!IF(buyline.Broadcast_Week__c = relatedTo.Send_Request__c, true, false)}">
<br/>
<table style="width:100%">
<tr>
<td><img src="{!$Resource.PagLogo}" align="left" /></td> 
</tr>
<tr>
<td><h2>ORDER/TRAFFIC INSTRUCTIONS</h2></td>
</tr>
</table>   
<table style="width:100%">
  <tr>
    <td><b>Network:</b></td>
    <td>{!buyline.Network__r.Name}</td>      
    <td><b>800⌗:</b></td>
    <td>{!buyline.X800__c}</td>    
  </tr>
  <tr>
   <td><b>Rep:</b></td>
    <td>{!buyline.Rep__c}</td>      
    <td><b>ISCI:</b></td>
    <td>{!buyline.SPOT_ISCI__c}</td>  
  </tr>
  <tr>
    <td><b>Phone:</b></td>
    <td>203-226-0011</td>      
    <td></td>
    <td></td>  
  </tr>
  <tr>
  <td></td> <td></td> <td></td> <td></td>
  </tr>
     <tr>
    <td><b>Date:</b></td>
    <td><apex:outputText value="{0,date}">
                         <apex:param value="{!Today()}" />
</apex:outputText></td>      
    <td></td>
    <td></td>  
  </tr>
  <tr>
   <td><b>Client:</b></td>
    <td>Ring2Media</td>      
    <td><b>Buyer:</b></td>
    <td>Allison Ryan</td>  
  </tr>
  <tr>
   <td><b>Advertiser:</b></td>
    <td>{!buyline.Spot__r.Advertiser__c}</td>      
    <td><b>Phone:</b></td>
    <td>203-361-3993</td>  
  </tr>
  <tr>
   <td><b>Brand:</b></td>
    <td>{!buyline.Spot__r.Brand__c}</td>      
    <td><b>Email:</b></td>
    <td>allison@ring2media.com</td>  
  </tr>
  <tr>
  <td><b>Length:</b></td> 
  <td>:{!buyline.Spot__r.Length__c}</td>
  </tr>
  <tr>
      <td><b>Flight:</b></td>
      <td>{!buyline.Flight__c}</td> 
    </tr>  
</table>
     <br/>    
<table cellpadding="5" style="border-collapse: collapse" width="860" border="1">
<tr>
<td style="background-color: ⌗D8D8D8; color: ⌗190707" width="85"><b>DAYS</b></td>
<td style="background-color: ⌗D8D8D8; color: ⌗190707" width="175"><b>TIME</b></td>
<td style="background-color: ⌗D8D8D8; color: ⌗190707" width="100"><b>⌗ OF SPOTS</b></td>
<td style="background-color: ⌗D8D8D8; color: ⌗190707" width="100"><b>800⌗ </b></td>
<td style="background-color: ⌗D8D8D8; color: ⌗190707" width="100"><b>ISCI</b></td>
<td style="background-color: ⌗D8D8D8; color: ⌗190707" width="100"><b>GROSS COST PER UNIT</b></td>
<td style="background-color: ⌗D8D8D8; color: ⌗190707" width="100"><b>⌗ OF WEEKS</b></td>
<td style="background-color: ⌗D8D8D8; color: ⌗190707" width="100"><b>TOTAL</b></td>
</tr>
</table>
<apex:repeat value="{!relatedTo.Daypart__r}" var="days">
<apex:outputPanel rendered="{!IF(days.Media_Buy__c = buyline.Id, true, false)}">
<table cellpadding="5" style="border-collapse: collapse" width="860" border="1">
<tr>
              <td width="85">
                        {!days.Days__c}
                    </td>
              <td width="175">
                        {!days.Frame__c}
                    </td>
                    <td width="100">
                    {!TEXT(days.Weekly_Units__c)}
                        </td>
                    <td width="100">
                        {!days.DNIS__c}   
                    </td>
                   <td width="100">
                        {!days.ISCI__c}  
                    </td>
                    <td width="100">
                        ${!days.Gross_Rate__c}0 
                    </td>
        <td width="100">
                        1
                    </td>
                    <td width="100">
                       ${!days.Gross_Weekly_Total__c}0
                    </td>
            </tr>   
 </table> 
</apex:outputPanel>
</apex:repeat>
<table cellpadding="5" style="border-collapse: collapse" width="860" border="1">
<tr>
<td width="85"></td>
<td width="175"></td>
<td width="100"></td>
<td width="100"></td>
<td width="100"></td>
<td width="100"></td>
<td width="100"></td>
<td width="100"></td>
</tr>
<tr>
<td width="85"></td>
<td width="175"></td>
<td width="100"></td>
<td width="100"></td>
<td width="100"></td>
<td width="100"></td>
<td width="100"></td>
<td width="100">${!buyline.Total_Buy__c}00</td>
</tr>
</table>
<br/>
   <p><b>{!buyline.TXTSepReq__c}</b></p>
          <p><b>{!buyline.TXTMaxSpotDay__c}</b></p>
</apex:outputPanel>
</div>
</apex:repeat>
</body>
</html>
</messaging:attachment>

Any help would be appreciated!
1 件の回答
  1. John Neff (Ring2Media)
    2015年10月28日 22:12
    Also, here is a better picture of the table: 

    Also, here is a better picture of the table:
回答を記入...
0/9000