CODEWITHSUNDEEP
csshtml-tableoutlookhtml-email
SaturnsEye
SaturnsEye

Reputation: 6509

Tables side by side won't work in Outlook

I have created two tables that sit side by side for an email newsletter but when viewed in Outlook the second table goes under the first.

Here is the JSfiddle.

HTML:

<div id="container">

<table id="table1">
    <tr>
        <th colspan="2">&nbsp;</th>
    </tr>
    <tr>
        <td height="106" colspan="2">&nbsp;</td>
    </tr>
    <tr>
        <td height="155">&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td height="114">&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</table>

<table id="table2">
    <tr>
        <th colspan="2">&nbsp;</th>
    </tr>
    <tr>
        <td colspan="2">&nbsp;</td>
    </tr>
    <tr>
        <td height="236">&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td height="118">&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</table>

</div>

CSS:

#table1, #table2 {
    border: 1px solid black;
    float: left;
    width: 350px;
}
#table2 {
    float: right
}
#container {
    width: 700px;
    margin: 0 auto;
}

Upvotes: 2

Views: 4323

Answers (2)

kumarharsh
kumarharsh

Reputation: 19629

You can nest both tables within two cells of a father table.

<table class="father">
  <tr>
    <td>
        <table>...</table>
    </td>
    <td>
        <table>...</table>
    </td>
  </tr>
</table>

Upvotes: 6

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85593

Try this:

table{table-layout: fixed;}

Or you have wrapped the both table in a div that is container. Define the width of this like #container{width: 1200px;}.

as per your comment

The width of container is defined only 700 pixels that is less than the width of both table which is causing to go below the first table. So, increase the width of #container which covers both table's width.

Upvotes: 0

Related Questions