Table borders are going out of bound on right side - html

Question

I have made a Email template for order confirmation.
It has a table,the table layout is fine on regular devices but on the gmail application on Phone the table layout is being disturbed.
The table border is going out of bound on the right side.
Here is my code for the email template:
<div style="text-align: center; margin: 0, auto; padding: 10px;">
<a href="http://brightopaints.com/" target="_blank">
<img src="http://brightopaints.com/wp-content/themes/brightoPaints/images/BrightoPaintlogo-2.png" alt="Brighto Paint" class="FollowBlockIcon" width="102" style="width: 102px; max-width: 102px;" />
</a>
</div>
<div style="max-width: 730px; background-color: #ebebeb; border-radius: 10px; text-align: center; margin: auto !important; padding-left: 24px; padding-right: 24px;">
<h1 style="color: #514f9e; padding: 15px; font-size: 48px; font-weight: 600;">THANK YOU!</h1>
<img src="http://brightopaints.com/wp-content/themes/brightoPaints/images/truck.png" width="250" style="width: 250px; max-width: 250px;" />
<h2 style="color: #000000; padding-top: 25px; font-size: 28px; font-weight: 500;">Your order is on its way.</h2>
<h2 style="color: #000000; padding-top: 25px; font-size: 18px; font-weight: 500;">this email confirms that we have received our order ". date('ymdHis')." placed on ".date('d-m-Y')."</h2>
<hr style="border: 1.2px solid black; margin-left: 30px; margin-right: 30px; margin-top: 40px;" />
<h2 style="color: #000000; padding-top: 12px; font-size: 36px; font-weight: 300;">shipping and billing details</h2>
<div style="border: 1px solid black; border-radius: 5px; margin: 24px; padding-left: 15px; padding-right: 15px;">
<table style="width: 100%; border-collapse: collapse; border-style: hidden; overflow-x: auto;">
<tbody>
<tr>
<td style="border: 2px solid white; padding: 8px;">User Name</td>
<td style="font-weight: bold !important; border: 2px solid white; padding: 8px;">".$person_name."</td>
</tr>
<tr>
<td style="border: 2px solid white; padding: 8px;">User Email</td>
<td style="font-weight: bold !important; border: 2px solid white; padding: 8px;">".$person_email."</td>
</tr>
<tr>
<td style="border: 2px solid white; padding: 8px;">Contact Number</td>
<td style="font-weight: bold !important; border: 2px solid white; padding: 8px;">".$person_number."</td>
</tr>
<tr>
<td style="border: 2px solid white; padding: 8px;">Address</td>
<td style="font-weight: bold !important; border: 2px solid white; padding: 8px;">".$complete_address."</td>
</tr>
<tr>
<td style="border: 2px solid white; padding: 8px;">Product Name</td>
<td style="font-weight: bold !important; border: 2px solid white; padding: 8px;">".$product_name."</td>
</tr>
<tr>
<td style="border: 2px solid white; padding: 8px;">Product Shade</td>
<td style="font-weight: bold !important; border: 2px solid white; padding: 8px;">".$product_shade_name."</td>
</tr>
<tr>
<td style="border: 2px solid white; padding: 8px;">Type/Packaging</td>
<td style="font-weight: bold !important; border: 2px solid white; padding: 8px;">".$product_type_packaging."</td>
</tr>
<tr>
<td style="border: 2px solid white; padding: 8px;">Quantity</td>
<td style="font-weight: bold !important; border: 2px solid white; padding: 8px;">".$product_quantity."</td>
</tr>
<tr>
<td style="border: 2px solid white; padding: 8px;">Order Message</td>
<td style="font-weight: bold !important; border: 2px solid white; padding: 8px;">".$order_message."</td>
</tr>
</tbody>
</table>
</div>
<h2 style="color: #000000; padding-top: 12px; padding-left: 22px; font-size: 36px; font-weight: 300; text-align: left !important;">Total :</h2>
<h2 style="color: #000000; padding-top: 12px; padding-left: 22px; font-size: 20px; font-weight: 300; text-align: left !important;">subtotal :</h2>
<h2 style="color: #000000; padding-top: 62px; padding-left: 22px; padding-right: 22px; padding-bottom: 62px; font-size: 15px; font-weight: 500; text-align: center !important;">
if anything doesn't look right, simply contact us at our <span style="color: #537bed; text-decoration: underline;">Toll Free: 08000-1973</span> if it hasn't been dispatched, we will get it sorted right away.
</h2>
</div>
I have tried to use overflow:hidden; but then my content is cut off.
Here is what I am getting:

Answer 1

Use table-layout:fixed; for table and for all td to word-wrap:break-word;
NOTE:
I have added the word-wrap:break-word; ONLY for email due to inline css elements so please do the same for all other td.
<div style='text-align: center;margin: 0,auto;padding: 10px;'>
<a href='http://brightopaints.com/' target='_blank'><img src='http://brightopaints.com/wp-content/themes/brightoPaints/images/BrightoPaintlogo-2.png' alt='Brighto Paint' class='FollowBlockIcon' width='102' style='width:102px; max-width:102px;'></a>
</div>
<div style='max-width: 730px;background-color: #ebebeb;border-radius: 10px;text-align: center; margin: auto !important;padding-left: 24px;padding-right: 24px;'>
<h1 style='color: #514f9e;padding: 15px;font-size: 48px;font-weight: 600;'>THANK YOU!</h1>
<img src='http://brightopaints.com/wp-content/themes/brightoPaints/images/truck.png' width='250' style='width:250px; max-width:250px' />
<h2 style='color: #000000;padding-top: 25px;font-size: 28px;font-weight: 500;'>Your order is on its way.</h2>
<h2 style='color: #000000;padding-top: 25px;font-size: 18px;font-weight: 500;'>this email confirms that we have received our order ". date('ymdHis')." placed on ".date('d-m-Y')."</h2>
<hr style='border: 1.2px solid black;margin-left: 30px;margin-right: 30px;margin-top: 40px;'>
<h2 style='color: #000000;padding-top: 12px;font-size: 36px;font-weight: 300;'>shipping and billing details</h2>
<div style='border: 1px solid black;border-radius: 5px;margin: 24px;
padding-left: 15px;padding-right: 15px;'>
<table style='width: 100%;border-collapse: collapse;border-style: hidden;overflow-x:auto;table-layout:fixed;'>
<tbody>
<tr>
<td style='border: 2px solid white;
padding: 8px;'>User Name</td>
<td style='font-weight: bold !important;border: 2px solid white;
padding: 8px;'>".$person_name."</td>
</tr>
<tr>
<td style='border: 2px solid white;
padding: 8px;'>User Email</td>
<td style='font-weight: bold !important;border: 2px solid white;
padding: 8px; word-wrap:break-word;'>dsfadsfasdfasdfsddsfadsfasdfasdfsdafasdfasdfadfadsfadsfasdfasdfsdafasdfasdfadfaafasdfasdfadfa#gmail.com</td>
</tr>
<tr>
<td style='border: 2px solid white;
padding: 8px;'>Contact Number</td>
<td style='font-weight: bold !important;border: 2px solid white;
padding: 8px;'>".$person_number."</td>
</tr>
<tr>
<td style='border: 2px solid white;
padding: 8px;'>Address</td>
<td style='font-weight: bold !important;border: 2px solid white;
padding: 8px;'>".$complete_address."</td>
</tr>
<tr>
<td style='border: 2px solid white;
padding: 8px;'>Product Name</td>
<td style='font-weight: bold !important;border: 2px solid white;
padding: 8px;'>".$product_name."</td>
</tr>
<tr>
<td style='border: 2px solid white;
padding: 8px;'>Product Shade</td>
<td style='font-weight: bold !important;border: 2px solid white;
padding: 8px;'>".$product_shade_name."</td>
</tr>
<tr>
<td style='border: 2px solid white;
padding: 8px;'>Type/Packaging</td>
<td style='font-weight: bold !important; border: 2px solid white;
padding: 8px;'>".$product_type_packaging."</td>
</tr>
<tr>
<td style='border: 2px solid white;
padding: 8px;'>Quantity</td>
<td style='font-weight: bold !important; border: 2px solid white;
padding: 8px;'>".$product_quantity."</td>
</tr>
<tr>
<td style='border: 2px solid white;
padding: 8px;'>Order Message</td>
<td style='font-weight: bold !important;border: 2px solid white;
padding: 8px;'>".$order_message."</td>
</tr>
</tbody>
</table>
</div>
<h2 style='color: #000000;padding-top: 12px;padding-left: 22px; font-size: 36px;font-weight: 300; text-align: left !important;'>Total : </h2>
<h2 style='color: #000000;padding-top: 12px;padding-left: 22px;font-size: 20px;font-weight: 300;text-align: left !important;'>subtotal : </h2>
<h2 style='color: #000000;padding-top: 62px;padding-left: 22px;padding-right: 22px;padding-bottom: 62px;font-size: 15px;font-weight: 500;text-align: center !important;'>
if anything doesn't look right, simply contact us at our <span style='color: #537bed;text-decoration: underline;'>Toll Free: 08000-1973</span> if it hasn't been dispatched, we will get it sorted right away.
</h2>
</div>