Text Overflow Issue in iOS Mail Tables

Encountering an issue with iOS Mail where the text size increases, causing it to overflow outside the table cell. The table displays correctly on desktop Outlook/web mail but not on the Mail app. I've attempted to add word wrap without any impact. Is there a way for the text to adjust to the box size or the box to adjust to the text size? Thanks!

https://i.sstatic.net/CBA6y.jpg

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
      <!-- CSS Reset -->
    <style>

        /* 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;        
        } 

        }            
    </style>
    

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

htmlioscsshtml-email

Answer №1

Removing this line from the table CSS was necessary:

table-layout: fixed !important;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Set the goBack function to the button in the user interface of the UI

In the process of developing a basic web browser, I have implemented a UIWebView along with two buttons featuring the symbols "<" and ">". In an attempt to link these buttons to goBack and goForward functions by using Ctrl+Dragging onto the UIWebView ...

iosobjective-cxcodeuiwebview

JQuery is detecting an outdated file version

Currently, I am in the process of working on a project for my Raspberry Pi that focuses on gathering network speed information and then logging it in a local webserver. The script itself is functioning perfectly fine, however, I have encountered an issue w ...

htmljquery

Transforming button alignment from vertical to horizontal in Bootstrap based on the screen size of the device

My website features a series of vertically aligned buttons on the sidebar, styled using the following CSS: CSS: .sidebar { position: fixed; left: 20px; top: 5%; width: 120px;} .sidebar .icons { font-size: 30px; margin: 21px; } ...

htmlcsstwitter-bootstrap

Discovering the CSS code for customization

As a beginner, I apologize in advance for any silly questions ˆˆ I am currently working on a website using bootstrap. Everything is functioning correctly, but I am struggling to override some CSS styles. In the image provided, you can see how I used the ...

htmlcssbootstrap-4

JSON parsing error within the HTML Sidebar list

I have a JSON file that contains data I need to parse in order to display information in my sidebar. When a user clicks the button labeled "List all sessions", the goal is to showcase all of the available session details grouped by Session ID and location. ...

javascriptjsonhtml

Display the header of the table after a page break in HTML using CSS

I have a unique question that is somewhat similar to others I've come across, like CSS: Repeat Table Header after Page Break (Print View). The difference in my question lies in the need for handling multiple headers. My query is about displaying the ...

phpjqueryhtmlcssprint-preview

"Crafting dynamic buttons with ASP.NET and CSS that adapt to various

Looking for advice on making a popup responsive. Currently experiencing an issue where the buttons go off-screen when adjusting window size, even after using percentages in CSS instead of pixels. Any suggestions? CSS: .modal { display: none; posi ...

c#cssasp.netpopupresponsive

Guide on verifying the ng-valid status of all inputs within an AngularJS table

I'm working with a table where each row contains an input field. Here's the code snippet: When the save button is clicked, I need to go through each input and determine if it's ng-valid. <div class="line" data-ng-repeat="data in datas"& ...

javascriptangularjshtmlvalidation

Displaying a URL inside a div upon clicking a specified href link in an Angular application

After hours of searching on various search engines, I am still unable to find the solution to my problem. My goal is to display the URL in a div once it has been clicked using $http for dynamic links. Here's an example of what I'm trying to achi ...

htmlangularjs

Displaying a variety of images in an HTML document can be achieved without the need to manually write out a separate tag

As a newcomer to HTML, I find myself faced with a challenge. I have a folder containing 100 images, all sharing a common prefix in their names but differing in the second part. For instance, some examples include: "content_diffusion_delay_AthfT@jurEYTgf" a ...

htmlimageautomation

Only apply the z-index style in React rendering when it is specifically set to zero

My goal is to set a dynamic z-index for my components based on the state variables. Currently, it only works when the zindex is set to 0. Here is an example of my array: images:[ ['img1',false,[1,2,3],1,0],// ...

htmlcssreactjsecmascript-6jsx

Eliminate the approximately 20 pixel space on the right side of the HTML email when viewed on iOS

Recently, I've been focused on developing a contact form for my portfolio website. Successfully sending HTML emails from the server to my email address has been a highlight. Since I mainly access my emails on my iPod Touch, I tailored the mail templat ...

iphoneioscss

Unlocking two features with just a single tap

I am currently working on a website for a kiosk, where the site transitions like a photoslide between each section. To achieve this effect, I have added a layover/mask on the initial page. The layover/mask is removed using a mouse click function. This is ...

javascriptjqueryhtmlcss

What is the most effective method for saving a JSON file containing a intricate data structure for future reference?

I am facing a challenge with my iOS app and a JSON file that is quite large (around 50 MB) and has a complex tree structure. My goal is to save this file locally and access its data later on the app, with the ability to update parts of it in the future. A ...

iosobjective-cjsonplist

A useful tip for jQuery users: learn how to prevent the context menu from appearing when a text box is

Is there a way to prevent the context menu from appearing in jQuery when the text box is disabled? The right-click disable functionality works well in all browsers except for Firefox. Please note that the right-click disable functionality works when the t ...

javascriptjqueryhtmlcss

Troubleshooting Blade Template HTML Coloration Problem in Atom

When I include Laravel code inside the HTML element itself, it causes all subsequent HTML elements to appear discolored. For example, <body @php language_attributes() @endphp> will cause </body> to be discolored. However, if I use plain PHP i ...

phphtmllaravelatom-editorlaravel-blade

The function heightForRowAtIndexPath seems to be malfunctioning

I am having an issue with displaying an image in a tableView with the correct aspect ratio. Despite pre-calculating the aspect ratio of the image, it seems to be working fine on the actual image but not when displayed in the cell. The code for the image i ...

iosiphoneswiftuitableviewheightforrowatindexpath

Despite trying to avoid using HTML 'href' links, the iOS web app continues to open Safari

My iOS web application (tested on version 9.2) utilizes the windows.location.replace(url) JavaScript function for navigation instead of traditional <a href="xxx" /> links. The root of my application is not www.xxx.com, but rather www.xxx.com/mysite. ...

iossafari

Is it advisable to adjust the type of input control according to the drop down choice made?

I am currently working on creating an edit screen for users to update rows of data. One of the fields is a dropdown menu, while another field is an input labeled 'value'. Depending on the selection in the dropdown menu, I need to display differen ...

asp.netasp.net-mvc-3htmljquery-ui

Ensure that the .md formatting is maintained when using a fresh CSS paragraph selector

I recently added a new selector in the .css file for my Hugo website to implement MLA-style indentation for references. Here is the code snippet: .mla-ref { padding-left: 36px; text-indent: -36px; } Although this code creates a hanging indent as ...

cssmarkdownhugo