Dimensions of table in Internet Explorer and Microsoft Outlook

I am currently working on creating a mailing list and I am facing some challenges in setting the width of a table element in IE/Outlook.

Despite trying various solutions that I found in other inquiries, none of them seem to be effective.

The code snippet below showcases some of the attempts I have made. The div surrounding the table is necessary for additional styling purposes.

<!doctype html>
<html lang=en>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <style>
            *{
                margin:0;
                padding:0;
            }
            body{
                box-sizing: border-box;
            }
            table{
                border-collapse: collapse;
                border-spacing: 10px 5px;
            }
            </style>
    </head>

    <body>

        <div style="margin:0 auto; width:1000px;">

            <!--[if mso]>
                 <center>
                 <table><tr><td width="700">
            <![endif]-->

            <table cellpading="0" cellspacing="0" width=700 style="margin:0 auto; width: 700px">

                <!--Multiple instances of <TR> -->

            </table>

            <!--[if mso]>
                </td></tr></table>
                </center>
            ![endif]-->  

            <div>
    </body>
</html>

Answer №1

Let me provide you with an illustration of our typical approach:

<table style="background-color: #f7f7f7;" cellspacing="0" cellpadding="0" border="0" width="100%">
<tbody>
    <tr>
        <td valign="top" align="center">
            <table cellspacing="0" cellpadding="0" border="0" width="600">
                <tbody>
                        << INSERT YOUR TEMPLATE HERE>>
                </tbody>
            </table>
        </td>
    </tr>
</tbody>

This should serve as the resolution.

Answer №2

Great job with your code, just remember to close the endif for the second one. Take a look at the updated code below.

<!doctype html>
<html lang=en>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <style>
            *{
                margin:0;
                padding:0;
            }
            body{
                box-sizing: border-box;
            }
            table{
                border-collapse: collapse;
                border-spacing: 10px 5px;
            }
            </style>
    </head>

    <body>

        <div style="margin:0 auto; width:1000px;">

            <!--[if mso]>
                 <center>
                 <table><tr><td width="700">
            <![endif]-->

            <table cellpading="0" cellspacing="0" width=700 style="margin:0 auto; width: 700px">
<tr><td>
                <!--A lot of <TR> --> 
                Content here
</td></tr>
            </table>

            <!--[if mso]>
                </td></tr></table>
                </center>
            <![endif]-->  

            <div>
    </body>
</html>

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

Updating navbar in Bootstrap 4.5 to accommodate limited space

Snippet of Code (With Bootstrap 4.5): $(".self-first-ul").append('<li class="nav-item">A lengthy sentence that is too long for small screens.</li>'); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min. ...

Is there a way to trigger both the link and the div element simultaneously?

Is there a way to make both the button and the link light up simultaneously when hovering over the div element, instead of just the button lighting up first? <div id="b1"; class = b> <a href="test.html">BUY</a> < ...

annoying box filled with information

Take a look at my http://jsfiddle.net/8wSzk/2/ <div class="row1"> <div> <div class="circle-menu"> </div> <p> some option </p> </div> <div> <div class="circle-menu"> </div> ...

Tips for creating animations with multiple elements that share the same classes

I am trying to create expandable boxes that can open onclick and close again by clicking on the X. The issue I'm facing is that the close jQuery function isn't working. However, my main concern is how to optimize the code so it doesn't becom ...

Making rapid formatting changes by rearranging the positioning of words in Javascript

Struggling to untangle my complex code, I'm unable to make the necessary adjustments. Here's what I have: var stocks= [ ["Beef (80/20) raw","oz",115.4451262,3.293742347,72,"4.85 gallons","5.65 pounds","0 - ",2.142,19,20,"0.0001275510204"," ...

Secret message concealed within the depths of my Bootstrap 5 Side Navbar

I have successfully created a side NavBar using Bootstrap 5, but I'm facing an issue where my text is getting hidden behind the navbar. Any suggestions on how I can resolve this? Below is the code for my side Navbar: const Navbar = ({ handleClick, is ...

What is the easiest way to toggle the display of the hamburger menu in a basic grid or flex layout?

I have recently created a grid and flex-based menu. How can I make the hamburger menu function to show/hide the menu on click? Is there a way to achieve this without using JavaScript? Here is the current code snippet: .menu { display: grid; g ...

Increase the space below the footer on the Facebook page to allow for an

I recently created a webpage at and noticed that it is adding extra height below the footer on my Facebook page: "" I am seeking assistance on how to remove this additional 21px height below all content in the footer. I have tried various templates but n ...

Challenges experienced during the process of uploading a website to the server

I seem to have encountered an issue where the Navigation background image is missing after uploading my website onto the server. Surprisingly, everything else seems to be working perfectly. What could possibly be the cause of this discrepancy? navbar-de ...

How can the <animate /> tag be triggered using only CSS and HTML?

Looking for a way to trigger the animation rules of the <animate /> tag using only HTML and CSS. Is there a new standard in HTML and CSS that allows something like input:checked ~ svg animate {enabled:true;} coming up in 2020? Or some other creative ...

Background image changing due to React re-render

I'm working on a React component that generates a random background image each time a user visits the page. However, I'm facing an issue where the background image updates every time a user types something into an input field. I've tried usi ...

What is the best technique to position a div at the bottom of a container that has a height of 100

After many attempts and searching for answers, I'm still struggling to figure out how to make the div float to the bottom with 100% height. I've even considered if it's an issue with Pure or something else entirely. It's definitely frus ...

Customizing the appearance of all Angular components with styles.scss

Is there a way to create a universal style in styles.scss that can be applied to all Component selectors (e.g. app-componentA, app-componentB ...)? I understand that I could manually add the style to each selector, but I am concerned that it may be forgot ...

Nested Bootstrap structure with a column containing two sub-columns

I am attempting to create a grid layout using bootstrap. The layout should consist of a full 12 column layout on desktop, with an 8 column grid and a 4 column grid within it. The 8 column grid will contain an image/text, while the 4 column grid will have t ...

In order to achieve a sliding effect for the second div, it can be programmed to

Currently, I am working on implementing hide and show functionality in my project. However, I have come across a bug in my code that I need assistance with. When clicking on the first div element, the content opens from bottom to top instead of the desired ...

Position the div at the bottom of the page

I managed to successfully position the div at the bottom using this code snippet: #div { position: absolute; width: 100%; height: 58px; margin: 0 auto; bottom: 0; left: 0; overflow: hidden; } Lately, I decided to add a sidebar ...

Caught in a dilemma between flex-end and space-between, with margin thrown into the mix

When working with a flexbox and using justify-content:space-between, the first and last items are aligned to the edges of the flex container, with space distributed between them. But how can I align the first item to the right while keeping all other items ...

Can you explain the difference between serif and sans-serif fonts?

Can you explain the distinction between serif and sans-serif when it comes to the CSS font-family attribute? ...

Preventing div elements from being highlighted when double-clicked

I'm working with a div element that has a background image and I need help figuring out how to disable the highlighting effect when double-clicking on it. Is there a CSS property that can achieve this? ...

Aligning a button with a <div> block is not achieved through styling

Take a look at the jsfiddle example. Expected result: Actual result: Here is the HTML snippet responsible for that section of the page: <input type="submit" name="BT_resetZoom" value="Reset coordinates" id="BT_resetZoom" tabindex="10" style="height: ...