-
alltronicsbeveiligingAsked on December 11, 2014 at 4:51 AM
Hi Jotform,
I a problem with the tables in my responder email.
On smaller screens, the tables align prefect under each other. Only on bigger screens the tables align next to each other.
I have tried to adjust the html code but i couldnt figger it out.
Could you help me out?
Form: http://form.jotformpro.com/form/43363171149958
Code:
<p><span style="font-size: small;">Geachte {uwNaam},</span></p>
<p><span style="color: #000000; font-size: small;">Onderstaand vindt u een kopie van de aangeleverde gegevens. Wij adviseren u de gegevens goed op te bergen.</span></p>
<p><span style="color: #000000; font-size: small;">Met vriendelijke groet,</span></p>
<p><span style="color: #000000; font-size: small;">Alltronics beveiliging B.V. </span></p>
<p> </p>
<table style="border: 1px solid #666666; height: 19px; width: 685px; background-color: #ffffff;" border="1" frame="border" align="left">
<tbody>
<tr>
<td> </td>
<td><span style="font-size: small;"><strong>Gebruiker </strong></span></td>
<td><span style="font-size: small;"><strong>Sleuteltag</strong></span></td>
<td><span style="font-size: small;"><strong>Code </strong></span></td>
<td><span style="font-size: small;"><strong>Waarschuwen</strong></span></td>
<td><span style="font-size: small;"><strong>Telefoonnummer(s)</strong></span></td>
</tr>
<tr>
<td><strong> 1</strong></td>
<td>{naam31}</td>
<td><span style="white-space: pre;">{ontvangtEen}</span></td>
<td><span style="white-space: pre;">{persoonlijkeCode}</span></td>
<td><span style="white-space: pre;">{waarschuwenBij28}</span></td>
<td><span style="white-space: pre;">{telefoonnummers}</span></td>
</tr>
<tr>
<td><strong> 2</strong></td>
<td><span style="white-space: pre;">{naam43}</span></td>
<td><span style="white-space: pre;">{ontvangtEen44}</span></td>
<td><span style="white-space: pre;">{persoonlijkeCode45}</span></td>
<td><span style="white-space: pre;">{waarschuwenBij}</span></td>
<td><span style="white-space: pre;">{telefoonnummers47}</span></td>
</tr>
<tr>
<td><strong> 3</strong></td>
<td><span style="white-space: pre;">{naam49}</span></td>
<td><span style="white-space: pre;">{ontvangtEen26}</span></td>
<td><span style="white-space: pre;">{persoonlijkeCode60}</span></td>
<td><span style="white-space: pre;">{waarschuwenBij51}</span></td>
<td><span style="white-space: pre;">{telefoonnummers29}</span></td>
</tr>
<tr>
<td><strong> 4</strong></td>
<td><span style="white-space: pre;">{naam64}</span></td>
<td><span style="white-space: pre;">{ontvangtEen65}</span></td>
<td><span style="white-space: pre;">{persoonlijkeCode50}</span></td>
<td><span style="white-space: pre;">{waarschuwenBij67}</span></td>
<td><span style="white-space: pre;">{telefoonnummers68}</span></td>
</tr>
<tr>
<td><strong> 5</strong></td>
<td><span style="white-space: pre;">{naam}</span></td>
<td><span style="white-space: pre;">{ontvangtEen75}</span></td>
<td><span style="white-space: pre;">{persoonlijkeCode66}</span></td>
<td><span style="white-space: pre;">{waarschuwenBij98}</span></td>
<td><span style="white-space: pre;">{telefoonnummers99}</span></td>
</tr>
<tr>
<td><strong> 6</strong></td>
<td><span style="white-space: pre;">{naam58}</span></td>
<td><span style="white-space: pre;">{ontvangtEen78}</span></td>
<td><span style="white-space: pre;">{persoonlijkeCode76}</span></td>
<td><span style="white-space: pre;">{waarschuwenBij102}</span></td>
<td><span style="white-space: pre;">{telefoonnummers101}</span> </td>
</tr>
<tr>
<td><strong> 7</strong></td>
<td><span style="white-space: pre;">{naam74}</span></td>
<td><span style="white-space: pre;">{ontvangtEen81}</span></td>
<td><span style="white-space: pre;">{persoonlijkeCode79}</span></td>
<td><span style="white-space: pre;">{waarschuwenBij100}</span></td>
<td><span style="white-space: pre;">{telefoonnummers103}</span></td>
</tr>
<tr>
<td><strong> 8</strong></td>
<td><span style="white-space: pre;">{naam80}</span></td>
<td><span style="white-space: pre;">{ontvangtEen84}</span></td>
<td><span style="white-space: pre;">{persoonlijkeCode85}</span></td>
<td><span style="white-space: pre;">{waarschuwenBij106}</span></td>
<td><span style="white-space: pre;">{telefoonnummers105}</span></td>
</tr>
<tr>
<td><strong> 9</strong></td>
<td><span style="white-space: pre;">{naam86}</span></td>
<td><span style="white-space: pre;">{ontvangtEen87}</span></td>
<td><span style="white-space: pre;">{persoonlijkeCode82}</span></td>
<td><span style="white-space: pre;">{waarschuwenBij108}</span></td>
<td><span style="white-space: pre;">{telefoonnummers109}</span></td>
</tr>
<tr>
<td><strong> 10</strong></td>
<td><span style="white-space: pre;">{naam111}</span></td>
<td><span style="white-space: pre;">{ontvangtEen112}</span></td>
<td><span style="white-space: pre;">{persoonlijkeCode113}</span></td>
<td><span style="white-space: pre;">{waarschuwenBij114}</span></td>
<td><span style="white-space: pre;">{telefoonnummers107}</span></td>
</tr>
<tr>
<td><strong> 11</strong></td>
<td><span style="white-space: pre;">{naam83}</span></td>
<td><span style="white-space: pre;">{ontvangtEen120}</span></td>
<td><span style="white-space: pre;">{persoonlijkeCode88}</span></td>
<td><span style="white-space: pre;">{waarschuwenBij104}</span></td>
<td><span style="white-space: pre;">{telefoonnummers115}</span></td>
</tr>
<tr>
<td><strong> 12</strong></td>
<td><span style="white-space: pre;">{naam119}</span></td>
<td><span style="white-space: pre;">{ontvangtEen59}</span></td>
<td><span style="white-space: pre;">{persoonlijkeCode121}</span></td>
<td><span style="white-space: pre;">{waarschuwenBij117}</span></td>
<td><span style="white-space: pre;">{telefoonnummers116}</span></td>
</tr>
<tr>
<td><strong> 13</strong></td>
<td><span style="white-space: pre;">{naam124}</span></td>
<td><span style="white-space: pre;">{ontvangtEen123}</span></td>
<td><span style="white-space: pre;">{persoonlijkeCode125}</span></td>
<td><span style="white-space: pre;">{waarschuwenBij126}</span></td>
<td><span style="white-space: pre;">{telefoonnummers127}</span></td>
</tr>
<tr>
<td><strong> 14</strong></td>
<td><span style="white-space: pre;">{naam135}</span></td>
<td><span style="white-space: pre;">{ontvangtEen130}</span></td>
<td><span style="white-space: pre;">{persoonlijkeCode131}</span></td>
<td><span style="white-space: pre;">{waarschuwenBij132}</span></td>
<td>{telefoonnummers133} </td>
</tr>
<tr>
<td><strong> 15</strong></td>
<td><span style="white-space: pre;">{naam129}</span></td>
<td><span style="white-space: pre;">{ontvangtEen136}</span></td>
<td><span style="white-space: pre;">{persoonlijkeCode137}</span></td>
<td><span style="white-space: pre;">{waarschuwenBij138}</span></td>
<td>{telefoonnummers139}</td>
</tr>
<tr>
<td><strong> 16</strong></td>
<td><span style="white-space: pre;">{naam141}</span></td>
<td><span style="white-space: pre;">{ontvangtEen142}</span></td>
<td><span style="white-space: pre;">{persoonlijkeCode143}</span></td>
<td><span style="white-space: pre;">{waarschuwenBij144}</span></td>
<td>{telefoonnummers145}</td>
</tr>
<tr>
<td><strong> 17</strong></td>
<td><span style="white-space: pre;">{naam147}</span></td>
<td><span style="white-space: pre;">{ontvangtEen148}</span></td>
<td><span style="white-space: pre;">{persoonlijkeCode149}</span></td>
<td><span style="white-space: pre;">{waarschuwenBij150}</span></td>
<td>{telefoonnummers151}</td>
</tr>
<tr>
<td><strong> 18</strong></td>
<td><span style="white-space: pre;">{naam153}</span></td>
<td><span style="white-space: pre;">{ontvangtEen154}</span></td>
<td><span style="white-space: pre;">{persoonlijkeCode155}</span></td>
<td><span style="white-space: pre;">{waarschuwenBij156}</span></td>
<td>{telefoonnummers157}</td>
</tr>
<tr>
<td><strong> 19</strong></td>
<td><span style="white-space: pre;">{naam159}</span></td>
<td><span style="white-space: pre;">{ontvangtEen160}</span></td>
<td><span style="white-space: pre;">{persoonlijkeCode161}</span></td>
<td><span style="white-space: pre;">{waarschuwenBij162}</span></td>
<td>{telefoonnummers163}</td>
</tr>
<tr>
<td><strong> 20</strong></td>
<td><span style="white-space: pre;">{naam165}</span></td>
<td><span style="white-space: pre;">{ontvangtEen166}</span></td>
<td><span style="white-space: pre;">{persoonlijkeCode167}</span></td>
<td><span style="white-space: pre;">{waarschuwenBij168}</span></td>
<td>{telefoonnummers169}</td>
</tr>
</tbody>
</table>
<p> </p>
<table style="height: 50px; width: 685px; border: 1px solid #666666; background-color: #ffffff;" border="1" cellpadding="0" align="left">
<tbody>
<tr>
<td><strong>Toelichting gebruikersgegevens: </strong><br /> {toelichting53}</td>
</tr>
</tbody>
</table>
<p> </p>
<table style="height: 20px; width: 685px; border: 1px solid #666666; background-color: #ffffff;" border="1" align="left">
<tbody>
<tr>
<td><strong><span style="font-size: small;">Dag</span></strong></td>
<td><strong><span style="font-size: small;">Mag open om - moet sluiten om</span></strong></td>
</tr>
<tr>
<td>Maandag</td>
<td>{maandagMag}</td>
</tr>
<tr>
<td>Dinsdag</td>
<td>{dinsdagMag185}</td>
</tr>
<tr>
<td>Woensdag</td>
<td>{woensdagMag}</td>
</tr>
<tr>
<td>Donderdag</td>
<td>{donderdagMag}</td>
</tr>
<tr>
<td>Vrijdag</td>
<td>{vrijdagMag}</td>
</tr>
<tr>
<td>Zaterdag</td>
<td>{zaterdagMag}</td>
</tr>
<tr>
<td>Zondag</td>
<td>{zondagMag}</td>
</tr>
</tbody>
</table>
-
valReplied on December 11, 2014 at 9:10 AM
Hi,
Please try put a "margin: 0 auto;" on the <table> style tag, you can notice that there are 3 the same styles on your <table> tag, Please do this to the 3 <table> tags and your Email template will be centered, so that it will prevent making 3 cols on each tables.
Also, change the align="left" to align="middle" this is also under the <table> tag.
Hope this help.
Thanks.
-
alltronicsbeveiligingReplied on January 8, 2015 at 4:58 AM
It worked! many thanks!
-
Ashwin JotForm SupportReplied on January 8, 2015 at 8:24 AM
Hello alltronicsbeveiliging,
On behalf of my colleague, you are welcome.
Do get back to us if you have any questions.
Thank you!