The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> HTML Email Cell Width Help
RMI Man
post Apr 1 2019, 11:42 AM
Post #1





Group: Members
Posts: 5
Joined: 1-April 19
Member No.: 26,867



Hi there, I’m a brand-new newbie to this forum and I’m in desperate help with some HTML code I’ve created for a corporate HTML email signature. I’m trying to get my Disclaimer cell to match the width of the row above that contains attributes that auto-populate from our Azure Cloud AD. Can anyone please help me with this?

Thank you so much ahead of time!

CODE
<table width="600" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td style="height: 20px;"></td>
    </tr>
  </tbody>
</table>
<table width="600" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tbody>
          <tr>
            <td><table border="0" cellspacing="0" cellpadding="0">
              <tbody>
                <tr>
                  <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tbody>
                      <tr>
                        <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
                          <tbody>
                            <tr>
                              <td style="line-height: 11pt;"><span style="font-weight: bold; font-family: Arial, Helvetica, sans-serif; font-size: 10pt; color: rgb(0, 40, 85);">{Display Name}</span><br>
                                <span style="font-family: Arial, Helvetica, sans-serif; font-size: 8pt; color: rgb(0, 40, 85);">{Title}</span></td>
                              </tr>
                            </tbody>
                          </table></td>
                        </tr>
                      <tr>
                        <td style="padding-top: 10px;"><table border="0" cellspacing="0" cellpadding="0">
                          <tbody>
                            <tr>
                              <td style="border-top: 1px solid rgb(0, 40, 85); border-bottom: 1px solid rgb(0, 40, 85); padding-bottom: 1px"><table border="0" cellspacing="0" cellpadding="0">
                                <tbody>
                                  <tr>
                                    <td align="center" valign="middle" style="vertical-align: middle; padding-right: 5px"> </td>
                                    <td><span><a href="tel:{Home phone}" style="font-family: Arial, Helvetica, sans-serif; font-size: 8pt; color: rgb(113, 155, 175);">{Home phone}</a></span></td>
                                    <td align="center" valign="middle" style="vertical-align: middle; padding-left: 15px; padding-right: 5px"> </td>
                                    <td><span><a href="mailto:{E-mail}" style="font-family: Arial, Helvetica, sans-serif; font-size: 8pt; color: rgb(113, 155, 175);">{E-mail}</a></span></td>
                                    <td align="center" valign="middle" style="vertical-align: middle; padding-left: 15px; padding-right: 5px"> </td>
                                    <td><span><a href="#" style="font-family: Arial, Helvetica, sans-serif; font-size: 8pt; color: rgb(113, 155, 175);">{web}</a></span></td>
                                    </tr>
                                  </tbody>
                                </table></td>
                              </tr>
                            </tbody>
                          </table></td>
                        </tr>
                      <tr>
                        <td style="padding-top: 10px; padding-bottom: 20px; font-family: Arial, Helvetica, sans-serif; font-size: 7pt; color: rgb(136, 136, 136); font-style: italic; text-align: justify;">The company accepts no liability for the content of this email, or for the consequences of any actions taken on the basis of the information provided, unless that information is subsequently confirmed in writing. If you are not the intended recipient, then you are hereby notified that disclosing, copying, distributing, or taking any action in reliance on the contents of this information is strictly prohibited.</td>
                        </tr>
                      </tbody>
                    </table></td>
                  </tr>
                </tbody>
              </table></td>
          </tr>
          </tbody>
      </table></td>
    </tr>
  </tbody>
</table>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
 
Reply to this topicStart new topic
Replies
Christian J
post Apr 1 2019, 06:13 PM
Post #2


.
********

Group: WDG Moderators
Posts: 8,255
Joined: 10-August 06
Member No.: 7



Now I remembered a way to make it work:

CODE
<table style="width: 1px;">
<tr>
<td><pre>foo foo foo</pre></td>
</tr>
<tr>
<td>lorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit amet</td>
</tr>
</table>

The 1px width makes the table try to be narrow, but the top row content forces it to expand to fit its content. The PRE element in the top row prevents linebreaks, while the bottom row can still wrap on multiple lines. (You might also use of &nbsp; entities instead of PRE, but then some characters like hyphens may still cause linebreaks to happen.)
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 1 2019, 08:37 PM
Post #3


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,459
Joined: 9-August 06
Member No.: 6



Why the PRE?

HTML
<table style="width: 1px;">
<tr>
<td style="white-space: nowrap">foo foo foo</td>
</tr>
<tr>
<td>lorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit amet</td>
</tr>
</table>

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic


Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 11th December 2019 - 03:06 PM