Html help needed - tables dont align under each other

  • Profile Image
    alltronicsbeveiliging
    Asked on December 11, 2014 at 04: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.&nbsp;</span></p>

    <p>&nbsp;</p>

    <table style="border: 1px solid #666666; height: 19px; width: 685px; background-color: #ffffff;" border="1" frame="border" align="left">

    <tbody>

    <tr>

    <td>&nbsp;</td>

    <td><span style="font-size: small;"><strong>Gebruiker &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</strong></span></td>

    <td><span style="font-size: small;"><strong>Sleuteltag</strong></span></td>

    <td><span style="font-size: small;"><strong>Code &nbsp; &nbsp;&nbsp;</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>&nbsp;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>&nbsp;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>&nbsp;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>&nbsp;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>&nbsp;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>&nbsp;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>&nbsp;</td>

    </tr>

    <tr>

    <td><strong>&nbsp;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>&nbsp;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>&nbsp;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>&nbsp;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>&nbsp;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>&nbsp;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>&nbsp;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>&nbsp;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}&nbsp;</td>

    </tr>

    <tr>

    <td><strong>&nbsp;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>&nbsp;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>&nbsp;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>&nbsp;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>&nbsp;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>&nbsp;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>&nbsp;</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:&nbsp;</strong><br />&nbsp;{toelichting53}</td>

    </tr>

    </tbody>

    </table>

    <p>&nbsp;</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>

    Screenshot

  • Profile Image
    val
    Answered on December 11, 2014 at 09: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.

     

  • Profile Image
    alltronicsbeveiliging
    Answered on January 08, 2015 at 04:58 AM

    It worked! many thanks!

  • Profile Image
    ashwin_d
    Answered on January 08, 2015 at 08:24 AM

    Hello alltronicsbeveiliging,

    On behalf of my colleague, you are welcome.

    Do get back to us if you have any questions.

    Thank you!