[SalesForce] AMPScript – HTML Formatting for Dynamic Table (Outlook 2013)

I have a transactional email which is sent to a specific report. My code executes a dynamic look-up to a data extension to retrieve the transactional lines related to a specific key in the report. The number of lines in the lookup table can be different between every single email.

The problem I am having is the final HTML formatting for the table is coming up out mangled in Outlook (and in Gmail to a smaller extent)[just the table, all the other elements are fine]. The source code below shows fine on the "view as web page" (and incidentally shows fine in Outlook 2013 mobile), but just doesn't render correctly in several email clients. Does anyone have any advice about how to properly format the HTML table?

<b> Samples in this Order:</b>
</p>
<table dir="ltr" id="ordertable" style="width:100%;" cellspacing="0" cellpadding="0" border="1">
  <colgroup>
    <col class="fixed">
    <col class="fixed">
    <col class="fixed">
    <col class="fixed">
    <col class="fixed">
   </colgroup>
  <tr>
    <td>Item Number
    </td>
    <td>Description
    </td>
    <td>Quantity
    </td>
    <td>UM
    </td>
    <td>Catalog Link</td>
  </tr>

</table>

<p id="solinescode">%%[ VAR @rs, @row, @cntr SET @rs = LookupRows("Sales Order Lines Import1","PBSI__SoName__c",[sonumber]) FOR @cntr = 1 to RowCount(@rs) do SET @row = Row(@rs, @cntr) ]%%
</p>

<table dir="ltr" id="ordertable" style="width:100%;" cellspacing="0" cellpadding="0" border="1">
  <colgroup>
    <col class="fixed">
    <col class="fixed">
    <col class="fixed">
    <col class="fixed">
    <col class="fixed">
  </colgroup>
  <tr>
  <td>%%=Field(@row,"Item_Number_Name__c")=%%
    </td>
 <td>%%=Field(@row,"pBSI__Item_SOLine_Description__c")=%%    </td>
    <td>%%=FormatNumber(Field(@row,"PBSI__Quantity_Needed__c"),"N")=%%
    </td>
    <td>%%=Field(@row,"UM__c")=%%
    </td>
    <td><a href="%%=Field(@row,"Datasheet__c")=%%">%%=Field(@row,"Series__c")=%%</a></td>
  </tr>
    </table>
<p id="solinescode">%%[NEXT @cntr]%%</p>

<style type="text/css">#solinescode  {
  display:none
}
  table{
    table-layout: fixed;
    min-width: 100px;
  }
  td{
    word-wrap:break-word;
  }
  .fixed {
  width: 100px;
}
</style>

Best Answer

I would definitely not break your column heading row and data rows into separate tables. The go-to web-dev methods for styling rarely work consistently in email HTML. You'll need to rely on in-line styles for formatting.

I generally code looping HTML output like this, because it's easier to tweak for email client adjustments:

%%[

VAR @rs, @row, @cntr, @soNumber
set @soNumber = AttributeValue("sonumber")
SET @rs = LookupRows("Sales Order Lines Import1","PBSI__SoName__c",@soNumber) 

if rowcount(@rs) > 0 then

    FOR @cntr = 1 to RowCount(@rs) do 

      var @itemNumber, @description, @qty, @um, @catalogLink, @series

      SET @row = Row(@rs, @cntr) 
      set @itemNumber = Field(@row,"Item_Number_Name__c")
      set @description = Field(@row,"pBSI__Item_SOLine_Description__c")
      set @qty = FormatNumber(Field(@row,"PBSI__Quantity_Needed__c"),"N")
      set @um = Field(@row,"UM__c")
      set @catalogLink = Field(@row,"Datasheet__c")
      set @series = Field(@row,"Series__c")

      ]%%

      %%[ if @cntr == 1 then ]%%

        <p><b>Samples in this Order:</b></p>
        <table cellspacing="0" cellpadding="0" border="1">
          <tr>
            <td>Item Number</td>
            <td>Description</td>
            <td>Quantity</td>
            <td>UM</td>
            <td>Catalog Link</td>
          </tr>

      %%[ endif ]%%

        <tr>
            <td>%%=v(@itemNumber)=%%</td>
            <td>%%=v(@description)=%%</td>
            <td>%%=v(@qty)=%%</td>
            <td>%%=v(@um)=%%</td>
            <td><a href="%%=redirectto(@catalogLink)=%%">%%=v(@series)=%%</a></td>
        </tr>


     %%[ if @cntr == rowcount(@rs) then ]%%
        </table>
     %%[ endif ]%%

    %%[ 
      NEXT @cntr
    ]%%

%%[ else ]%%

   <p>no rows found</p>    

%%[ endif ]%%
Related Topic