Границы таблицы выходят за пределы с правой стороны

Question

Я сделал шаблон электронного письма для подтверждения заказа.

В нем есть таблица, макет таблицы хорош на обычных устройствах, но в приложении gmail на телефоне макет таблицы нарушается.

Граница таблицы выходит за пределы с правой стороны.

Вот мой код для шаблона электронного письма:

<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>

Я пробовал использовать overflow: hidden; но затем мой контент обрезается.

Вот что я получаю:

Answer 1

Используйте table-layout:fixed; для table и для всех от td до word-wrap:break-word;

ПРИМЕЧАНИЕ:

Я добавил word-wrap:break-word; ТОЛЬКО для электронной почты из-за inline css элементы, сделайте то же самое для всех остальных 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>