I am designing an Email Template and am new to HTML and CSS.
I want to put the table2 right below table1. But, table2 goes outside the div and table1 completely whenever I try to do so. By “table going outside” I mean that the table2 appears outside the div and the first table when checked in Chrome’s page source. Also, I need the tables to have fixed width.
Please find the code below. Thank you.
<table border="0" cellpadding="0" cellspacing="0" class="body"
style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;; ">
<tbody>
<tr>
<td class="container"
style="font-family: verdana; sans-serif; vertical-align: top; display: block; margin: 0 auto; max-width: 600px; padding-bottom: 100px; width: 600px;">
<div align="center" class="content" style="box-sizing: border-box; background-color: #f6f6f6;
align-items: center; display: block; margin: 0 auto; max-width: 600px; padding-bottom: 30px;">
<!------------------------------------- New code Start ------------------------------------->
{{var:company_logo:""}}
<div align="center" class="content" style="box-sizing: border-box; display: block; margin: 0 auto; max-width: 480px; padding: 0px;
align-self: center;
/* background: grey; */
align-content: center;">
<div>
<b>
<div class="discover_updates">
<p style="color: #00d4d4; font-size: 24px; text-align: left; padding-top: 32px;">
{{var:discover_your_updates:""}}
Discover your updates, User!
</p>
</div>
</b>
</div>
<div style="font-family:verdana, sans-serif; color: #405052; font-size: 14px; text-align: left; ">
{{var:updates_intro_text:""}}
Great job! Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum <br></br>
So here are some updates for you, to keep it up!
</div>
<br></br>
<!-- Timeline messages -->
<div class="update_section">
{{var:update_section:""}}
</div>
<div style="color: #00d4d4; font-size: 16px; text-align: left;">
Updates
</div>
<div class="timeline_message">
{{var:timeline_messages}}
</div>
<table width="480px" style="display: table; width: 480px; table-layout: fixed; ">
<tr style="width: 480px;">
<th style="width: 25px; ">
<img src="https://i.ibb.co/VvTj7tc/Neuer-Kanal.png" height="20px" width="20px">
</th>
<th style="font-weight:400;">
<div
style="padding-top: 4px; font-family:verdana, sans-serif; color: #405052; font-size: 13px; text-align: left;">
New Channel1
</div>
</th>
<th
style="font-family:verdana, sans-serif; display: block;font-weight: 100; color: #405052; font-size: 13px; text-align: right;">
Aug 29<sup>th</sup>
</th>
</tr>
<tr>
<table style="display: table; width: 480px;margin-top: 8px">
<tr style="width: 480px;">
<th width="100px" style="width:120px ;">
<div style="height: 100px;
width: 100px;;
border-radius: 10px;
-webkit-box-shadow: 20px 25px 30px -25px rgba(0, 0, 0, 1);
-moz-box-shadow: 20px 25px 30px -25px rgba(0, 0, 0, 1);
box-shadow: 20px 25px 20px -25px rgba(0, 0, 0, 1);">
<img class="img-responsive" height="100px" width="100px" style="border-radius: 10%;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
object-fit: cover;"
src="https://i.postimg.cc/1zt10t2Y/young-beautiful-woman-pink-warm-sweater-natural-look-smiling-portrait-isolated-long-hair.jpg">
</div>
</th>
<th>
<div
style="font-weight: 400;font-family:verdana, sans-serif; color: #405052; font-size: 14px; text-align: left;">
<b>Pharmacovigilance Intro</b>
</div>
<div style="font-weight: 400;margin-top: 10px;font-family:verdana, sans-serif; color: #405052; font-size: 12px; text-align: left;
text-align: justify; overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;">
Loremipsum is the science
and activities relating to the
detection, assessment,
understanding and prevention of
adverse effects or any other
medicine/vaccine related
problem. All ne/vaccine related
problem. Lorem ipsum lorem ipsum
</div>
</th>
</tr>
</table>
</tr>
</table>
<!-- Timeline messages -->
<!-- Status update-->
<table width="480px" style="display: table; width: 480px; table-layout: fixed; overflow: hidden;">
<tr style="width: 480px;">
<th width="100px" style="width:120px ;">
<div style="height: 100px;
width: 100px;;
border-radius: 10px;
-webkit-box-shadow: 20px 25px 30px -25px rgba(0, 0, 0, 1);
-moz-box-shadow: 20px 25px 30px -25px rgba(0, 0, 0, 1);
box-shadow: 20px 25px 20px -25px rgba(0, 0, 0, 1);">
<img height="100px" width="100px" style="border-radius: 10%;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
object-fit: cover;"
src="https://i.postimg.cc/1zt10t2Y/young-beautiful-woman-pink-warm-sweater-natural-look-smiling-portrait-isolated-long-hair.jpg">
</div>
</th>
<th>Test</th>
</tr>
</table>
</div>
</div>
</td>
</tr>
</tbody>
</table>
This is the link to the full code: https://jsfiddle.net/348cmwh9/1/