I have css applied to a table. I want to make a row span the entire table that says information, highlighted a color, and centered. Instead it's just saying "information" and not centered across the row

<apex:component access="global" controller="PPACABenefitChecklistEmailTemplateHelper"> 
    <apex:attribute id="oppId" assignTo="{!oppId}" name="opportunityIDFromEmail" type="String" description="The Opporunity's SF ID"/>    
    <apex:repeat var="c" value="{!Checklists}">
            <table class="maintable">
                 <td class="section">

 <!--------LINE BELOW NOT WORKING----->
                    <table>    <tr BGCOLOR="#2d97cc">  <td  ALIGN="center" COLSPAN="2">Information</td></tr> </table>
<!---------WORKS FINE---------->
                    <table class="sub_section"> <tr>  <td class="mysub_section_label">Number:</td> <td class="sub_section_data"> {!c.name}</td></tr></table>
                    <table class="sub_section"> <tr>  <td class="mysub_section_label">Opportunity:</td>     <td class="sub_section_data"> {!c.Opportunity__r.name}</td> </tr></table>



CSS from email template

    <messaging:attachment renderAs="PDF" filename="OpporunityChecklists-{!LEFT(relatedTo.id,15)}">


    { font-family:"Lucida Grande", verdana, helvetica, arial, sans-serif; }

    { font-size: 11px; }

    { font-size:14px; font-weight: bold; padding-bottom:1px; }

    table.toptable { outline: 0px solid #2d97cc; border: 0px solid #2d97cc; cellpadding: 2px; font-size:14px; width: 620px;}
    table.maintable { outline: 1px solid #2d97cc; border: 1px solid #2d97cc; cellpadding: -2px; border-collapse:collapse; width: 620px;}
    table.bottomtable { outline: 0px solid #2d97cc; border: 0px solid #2d97cc; cellpadding: 2px; font-size:14px; width: 620px;}

    td.leftsection { outline: 0px solid #2d97cc; border: 1px solid #2d97cc; border-collapse:collapse; text-align:right; font-size:14px; padding-right:10px; width: 72px; }
    td.section { outline: 0px solid #2d97cc; border: 1px solid #2d97cc; border-collapse:collapse; }

    td.banner {height: 52px; font-size: 14px; color: #f7951e; font-weight: bold; }
    td.logo {text-align:right;}
    td.header { padding-top:20px; padding-right: 10px; padding-left:10px; paqdding-bottom:0px; text-align:center; }
    td.headernote { padding-top:0px; padding-right: 20px; padding-left:20px; text-align:center; text-valign: top; color: #0083c4; font-size: -1px;}

    {font-size: 14px;}

    {width: 250px; font-size: 10px;}

    {font-weight: bold;font-size: 10 px;  }

    {font-style: italic; font-size: 9px;}

    { padding-top:20px; text-align:center; color: #f7951e; font-size: 13px; font-weight: bold; width: 740px;}


    <c:EmailTemplateHelper opportunityIDFromEmail="{!relatedTo.id}" />

Tables, by default, have only enough width to accommodate their contents. I would hazard a guess that the other two tables work because of the class="sub_section" attribute on the table. You don't need to use that particular style-- you could just add width="100%", which will expand the table to the right boundary of the enclosing element.


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.