3

I am creating a VisualForce Email Template and I have a table (exactly the same shown below in screen shot) which I want to show using either html or VF, but doing below in VF looks very difficult and hence decided to do it in HTML.

When I developed everything in VF Email Template I see the table is getting shrink when there is no value for that column. Please guide what code do I need to change below?

With the above code table is getting shrink, I want fixed table width column, please guide.

UPDATE-1: I followed suggestions, but I get the below error for phone

enter image description here

  • CSS "fixed" requires a width to work effectively, otherwise it will auto-fit (once) based on content. – sfdcfox May 1 '17 at 17:07
4

You need to create a CSS and add styling to handle this.

<table class="fixed">
    <col width="20px" />
    <col width="30px" />
    <col width="40px" />
    <tr>
        <td>text</td>
        <td>text</td>
        <td>text</td>
    </tr>
</table>

and this will be your CSS

table.fixed { table-layout:fixed; }
table.fixed td { overflow: hidden; }
table {
            border-collapse: collapse;
        }

        table, tr, td {
            border: 1px solid black;
        }

So, for first table you have to define 4 columns with the fixed width, currently you are defining single column. Your code should look like this:

<table class="fixed">
    <col width="30px" />
    <col width="40px" />
     <col width="20px" />
     <col width="40px" />
    <tr>
        <td>Name</td><td>{!relatedTo.XXXX.Name}</td><td rowspan="3">Address</td><td rowspan="3">{!relatedTo.XXXX.XXXX}</td>
    </tr>
    <tr>
        <td>Phone</td><td>{!relatedTo.XXXX.XXXX}</td>
    </tr>
    <tr>
        <td>Email</td><td>{!relatedTo.XXX.XXXX}</td>
    </tr> 
</table>

Output

fixed table

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.