CODEWITHSUNDEEP
htmlcss
Pranay kumar
Pranay kumar

Reputation: 2197

Align table side by side in html email template

I have a dynamic data based on which I need to show them in the email template. I used the following code to align table side by side but it is not working. I use this table inside the loop so that same table repeat again and make the layout. There is also a parent table outside of the loop to contain this dynamic table but i didn't write those code here. Let me know what I am doing wrong.

<table align="left" style="width:50%;">
  <tr>
    <td>Name</td>
  </tr>
</table>
<table align="left" style="width:50%;">
  <tr>
    <td>Name</td>
  </tr>
</table>
<table align="left" style="width:50%;">
  <tr>
    <td>Name</td>
  </tr>
</table>

Upvotes: 0

Views: 424

Answers (1)

yuta y
yuta y

Reputation: 166

The 3th table is on the 2nd line becauses the first 2 are taking up 100% of the space.A solution is to remove the width style all together if you are using a loop to add the tables you can devide the 100 by the number of tables to get the width.

<table align="left">
  <tr>
    <td>Name</td>
  </tr>
</table>
<table align="left">
  <tr>
    <td>Name</td>
  </tr>
</table>
<table align="left">
  <tr>
    <td>Name</td>
  </tr>
</table>
Loop migth be like this

for(var i = 0;i<num;i++){
...
table.style.width = (100 / num) + "%";
...
};

Is this what you are after?

UPDATE

a better alternative migth be to make all the tables in to one like this.I think it should work on outlook.

<table align="left" style="width:100%;">
  <tr>
    <td>Name</td>
    <td>Name</td>
  </tr>
  <tr>
    <td>Name</td>
    <td>Name</td>
  </tr>
  <tr>
    <td>Name</td>
    <td>Name</td>
  </tr>
  <tr>
    <td>Name</td>
    <td>Name</td>
  </tr>
</table>
Would this work?

Upvotes: 2

Related Questions