4

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

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

1 Answer 1

5

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

1

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .