Table Text Running Outside Cell in iOS Mail
<p>I'm running into an issue where iOS Mail is increasing the text size, driving it outside the table cell. The table renders fine on desktop outlook/web mail, but fails on the Mail app. I've tried adding word wrap, but that didn't effect it at all. Is tehre a way to have either the text adjust to the box size or the box adjust to the text size?
Thanks!</p>

<p><a href="https://i.stack.imgur.com/CBA6y.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CBA6y.jpg" alt="enter image description here"></a></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;body&gt;
      &lt;!-- CSS Reset --&gt;
    &lt;style&gt;

        /* What it does: Remove spaces around the email design added by some email clients. */
        /* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */
        html,
        body {
            margin: 0 auto !important;
            padding: 0 !important;
            height: 100% !important;
            width: 100% !important;
        }
      
        /* What it does: Stops email clients resizing small text. */
        * {
            -ms-text-size-adjust: 100%;
            -webkit-text-size-adjust: 100%;
        }
        
        /* What is does: Centers email on Android 4.4 */
        div[style*="margin: 16px 0"] {
            margin:0 !important;
        }
        
        /* What it does: Stops Outlook from adding extra spacing to tables. */
        table,
        td {
            mso-table-lspace: 0pt !important;
            mso-table-rspace: 0pt !important;
            overflow-wrap: break-word;
              word-wrap: break-word;        }
                
        /* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
        table {
            border-spacing: 0 !important;
            border-collapse: collapse !important;
            table-layout: fixed !important;
            margin: 0 auto !important;
        }
        .counter {
        font-size: 40px;
        line-height: 40px;
        font-weight: 400;
        color: #73879C;
        border-left: 2pxsolid#ADB2B5;
        float: left;
       
        }
        .subcounter {
        font-size: 10px;font-weight: 300;
        border-left: 2pxsolid#ADB2B5;
        float: left;        
        } 

        }            
    &lt;/style&gt;
    

            &lt;table role="presentation" cellspacing="0" cellpadding="0" align="left" width="100%" style=""&gt;
                &lt;tr&gt;
                    &lt;td style="padding: 20px 0; text-align: center; height="75" alt="alt_text" border="0" bgcolor="#dddddd" color: "#555555"&gt;
                        &lt;br&gt;&lt;br&gt;&lt;div class="counter"&gt;99,999,999&lt;/div&gt;
                        &lt;table role="presentation" cellspacing="0" cellpadding="0" align="left" width="100%" style=""&gt;
                            &lt;tr&gt;
                                &lt;td style="padding: 5px 0; text-align: center; height="25" alt="alt_text" border="0" bgcolor="#dddddd" color: "#555555"&gt;
                                    &lt;div class="subcounter"&gt;&amp;#8964; 10% WoW 
                                &lt;/td&gt;
                                &lt;td style="padding: 5px 0; text-align: center; height="25" alt="alt_text" border="0" bgcolor="#dddddd" color: "#555555"&gt;
                                    &lt;div class="subcounter"&gt;&amp;#8964; 10% MoM 
                                &lt;/td&gt;
                                &lt;td style="padding: 5px 0; text-align: center; height="25" alt="alt_text" border="0" bgcolor="#dddddd" color: "#555555"&gt;
                                    &lt;div class="subcounter"&gt;&amp;#8964; 10% YoY 
                                &lt;/td&gt;                        
                            &lt;/td&gt;
                        &lt;/table&gt;
                    &lt;td style="padding: 20px 0; text-align: center; height="50" alt="alt_text" border="0" bgcolor="#dddddd" color: "#555555"&gt;
                        &lt;br&gt;&lt;br&gt;&lt;div class="counter"&gt;99,999,999&lt;/div&gt;
                        &lt;table role="presentation" cellspacing="0" cellpadding="0" align="left" width="100%" style=""&gt;
                            &lt;tr&gt;
                                &lt;td style="padding: 5px 0; text-align: center; height="25" alt="alt_text" border="0" bgcolor="#dddddd" color: "#555555"&gt;
                                    &lt;div class="subcounter"&gt;&amp;#8964; 10% WoW 
                                &lt;/td&gt;
                                &lt;td style="padding: 5px 0; text-align: center; height="25" alt="alt_text" border="0" bgcolor="#dddddd" color: "#555555"&gt;
                                    &lt;div class="subcounter"&gt;&amp;#8964; 10% MoM 
                                &lt;/td&gt;
                                &lt;td style="padding: 5px 0; text-align: center; height="25" alt="alt_text" border="0" bgcolor="#dddddd" color: "#555555"&gt;
                                    &lt;div class="subcounter"&gt;&amp;#8964; 10% YoY 
                                &lt;/td&gt;                        
                            &lt;/td&gt;
                        &lt;/table&gt;
                    &lt;/td&gt;
                    &lt;td style="padding: 20px 0; text-align: center; height="50" alt="alt_text" border="0" bgcolor="#dddddd" color: "#555555"&gt;
                        &lt;br&gt;&lt;br&gt;&lt;div class="counter"&gt;99,999,999&lt;/div&gt;
                        &lt;table role="presentation" cellspacing="0" cellpadding="0" align="left" width="100%" style=""&gt;
                            &lt;tr&gt;
                                &lt;td style="padding: 5px 0; text-align: center; height="25" alt="alt_text" border="0" bgcolor="#dddddd" color: "#555555"&gt;
                                    &lt;div class="subcounter"&gt;&amp;#8964; 10% WoW 
                                &lt;/td&gt;
                                &lt;td style="padding: 5px 0; text-align: center; height="25" alt="alt_text" border="0" bgcolor="#dddddd" color: "#555555"&gt;
                                    &lt;div class="subcounter"&gt;&amp;#8964; 10% MoM 
                                &lt;/td&gt;
                                &lt;td style="padding: 5px 0; text-align: center; height="25" alt="alt_text" border="0" bgcolor="#dddddd" color: "#555555"&gt;
                                    &lt;div class="subcounter"&gt;&amp;#8964; 10% YoY 
                                &lt;/td&gt;                        
                            &lt;/td&gt;
                        &lt;/table&gt;
                    &lt;/td&gt;                    
                &lt;/tr&gt;
            &lt;/table&gt;
&lt;/body&gt;&lt;/html&gt;  </code></pre>
</div>
</div>
</p>