0

We have built a content block with tables in Content Builder. The aim is for business users to be able to make cosmetic changes to the templates (e.g add rows /columns) without having to adjust html.

This is done by right click the table in the Contents tab and adding the row.

(Link to this action can be found HERE)

The issue is that this adds a row as expected in desktop view. The mobile view requires an additional tag, which is not automatically copied over.

Has anyone else experienced this or have a solution?

  • What block type is used there? Is the right click and add a row experience in CKEditor? – AsinusAsinumFricat Oct 19 '17 at 17:56
  • @AsinusAsinumFricat thanks for your comment. can you please clarify what you mean by blocktype? its free form if that helps – Samuel Dare Oct 19 '17 at 17:58
  • @AsinusAsinumFricat and yes that is how they ad rows – Samuel Dare Oct 19 '17 at 18:11
  • Can you provide a snippet of the code you are using - are there any relevant styles on the table tr or td? – Gortonington Oct 19 '17 at 18:21
  • @Gortonington updated – Samuel Dare Oct 19 '17 at 18:44
1

Unfortunately as you have it set, it cannot be done that way via the UI. Although you can add IDs and classes to the table element, you cannot add these to individual cells yet - let alone automatically add them in.

But an alternative is to plan for SFMC UI to only add 'basic' TD or TR tags. If you do this, you can assign a class to the table, and then use CSS stylesheet to target the TR, TH, and TD tags accordingly.

For example:

<style>
.classy TR {}
.classy TR TH {background-color: #74178c;border-right: 2px solid #ed9c9c; border-bottom: 2px solid #ed9c9c;padding-left: 11px;font-weight: 400;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;color: #ffffff;height: 60px;text-align: left;font-family: Arial, Helvetica, sans-serif !important;}
.classy TR TD {display: none;background-color: #ffffff !important;text-align: left;height: 60px;}
</style>


<table class="classy">
  <tr>
      <th align="center">Header 1</th>
  </tr>
  <tr>
      <td align="center">Content 1</td>
  </tr>
</table>

If that is not possible (as it seems from your snippet) - you may want to look at creating some sort of compiler that can automatically create this. You could even accomplish this all inside SFMC (DE and LP):

  1. Store the header names, content, etc in a DE - editable by the user. You could set the number of columns/rows to be based on DE fields that have content, or have a separate DE field for this number.
  2. Create a LP using SSJS or AMPscript to define and compile your table HTML with IF Statements and FOR loops to compile your table.
  3. in your email have an HTTPGET call to gather this compiled table - passing parameters, such as emailname or whatever unique ID you want defined in DE.

Through this you can make it as complex or simple as you want - e.g. include options for font size, font family, background color, etc. for each cell.

It is a bit more effort on everyone's part, but it should provide the fully customizable table you require - without breaking the responsiveness of it.

|improve this answer|||||
  • 1
    THANKS +1 Will accept once I finish building it (might take a while) – Samuel Dare Oct 19 '17 at 19:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.