Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Min Width Nested Table HTML Email

Code works fine in gmail and apples mail client but outlook is driving me crazy.

<table cellpadding="0" width="600" align="center" valign="top" style="padding-bottom:10"            style="min-width:600px;">
<tr>
<td>    
<span style="font-family:Tahoma; background-color:#81DAF5; font-size:35px;"><i>Text</i>      </span>
</td>
<td>
<table align="right">
<tr>
<td align="right">
<span style="background-color:#ffffff; font-size:14px; font-family:Verdana, Geneva,   Arial, Helvetica, sans-serif"><i>Text</i></span>
</td>
</tr>
<tr>
<td align="right">
<span style="background-color:#ffffff; font-size:14px; font-family:Verdana, Geneva, Arial, Helvetica, sans-serif"><i>Text</i></span>
</td>
</tr>
</table>
</td>
</tr>
</table>

I want the entire table to have a min width of 600px but in outlook the text begins to wrap when I shrink the window size.

like image 295
Brian Avatar asked Jul 26 '26 19:07

Brian


2 Answers

min-width isn't supported by Outlook.

You have a span and a table sitting within a table cell. Use different cells for each part. Something like this is a basic example:

<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center">
      <!-- Center Panel -->
      <table width="600" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td width="400">
            <span style="font-family:Tahoma; background-color:#81DAF5; font-size:35px;">
              <i>Text</i>
            </span>
          </td>
          <td width="200" style="font-size:14px; font-family:Verdana, Geneva, Arial, Helvetica, sans-serif">
            <!-- Nested to stack two rows, could also use br's or rowspans if preferred -->
            <table width="100%" border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td align="right">
                  <i>Text</i>
                </td>
              </tr>
              <tr>
                <td align="right">
                  <i>Text</i>
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
like image 153
John Avatar answered Jul 28 '26 09:07

John


You can put a 'td' in a column (possibly in the 'thead' row but any 'tr' will work) and fill it with as many nbsp's as you need to maintain a minimum width. A nbsp is a non-breakable space, which means that (in most cases) will not be collapsed or allow a line wrap. A mono-spaced font works best for this.

<table>
    <thead>
        <td style="font-family: Consolas, monaco, monospace;">&nbsp;&nbsp;&nbsp;MinimumWidthHolder&nbsp;&nbsp;&nbsp;</td>
    </thead>
    <tbody>
        <tr>
            <td>your text</td>
        </tr>
    </tbody>
</table>
like image 22
codebliss Avatar answered Jul 28 '26 09:07

codebliss



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!