Search code examples
csshtml-tablehtml-emailcenteringemail-templates

Centering/Styling three tables in a td (for responsive email templating)

HTML code below:

<style>
table,tr,td{
    min-width:80px;
    min-height:80px;
    border:1px #B0B0B0 solid;
}

table.v_headtable{
width:100%;
margin:0 auto;
max-width:640px;
text-align:center;
}

</style>


<table align="center" class="v_headtable">
.
.
.
.
.
.
<tr>
    <td class="row rsocial">
        <table class="socialIcons">
            <tr><td><img src="../../Twitter.png" width="30" /></td></tr>
        </table>
        <table class="socialIcons">
            <tr><td><img src="../../fb.png" width="30" /></td></tr>
        </table class="socialIcons">
        <table height="30" class="socialIcons">
            <tr><td height="30"><img src="../../LinkedIn.png" width="30" /></td></tr>
        </table>
    </td>
</tr>

In the code above I'm unable to center the tables in a row. I want the tables to stay centered on larger screens and on mobile devices it should move downwards

Current output:

Required output:

Solution

  • Apply this CSS to your .socialIcons class:

    .socialIcons {
    display: inline-block;
}