The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> 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
RMI Man
post Apr 1 2019, 12:38 PM
Post #2





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



Is it possible to get the disclaimer cell to match the width of the auto-populated row with inline styles?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 1 2019, 01:44 PM
Post #3


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



I removed several nested tables that I don't think were used for anything. I did keep one nested table in order to produce the top and bottom borders, and just made that table 100% wide (which should expand it to fit the 600px wide parent table):

CODE
<table width="600" 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" style="width: 100%;">
    <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>
<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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 1 2019, 01:52 PM
Post #4


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



Even more HTML removed, not sure if it will work in an email client:

CODE
<table width="600" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
<tbody>
<tr>
<td style="border-top: 1px solid rgb(0, 40, 85); border-bottom: 1px solid rgb(0, 40, 85); padding-bottom: 1px">
<span style="margin-right: 2em;"><a href="tel:{Home phone}" style="font-family: Arial, Helvetica, sans-serif; font-size: 8pt; color: rgb(113, 155, 175);">{Home phone}</a></span>
<span style="margin-right: 2em;"><a href="mailto:{E-mail}" style="font-family: Arial, Helvetica, sans-serif; font-size: 8pt; color: rgb(113, 155, 175);">{E-mail}</a></span>
<span style="margin-right: 2em;"><a href="#" style="font-family: Arial, Helvetica, sans-serif; font-size: 8pt; color: rgb(113, 155, 175);">{web}</a></span>
</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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
RMI Man
post Apr 1 2019, 03:54 PM
Post #5





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



Oh, sorry. I was looking for the disclaimer row/cell to match the ever-changing width of the auto-populated row with Home phone, Email, and Web. The info row width will change with each user since their attributes are populated from our AD. Sorry I wasn’t more clear above.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 1 2019, 04:40 PM
Post #6


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



That's a tricky thing to do, since normally the widest row with the most content (in this case, disclaimer) will determine to width.

Maybe there's some newer CSS3 feature that lets you do it (no idea about support in email clients), otherwise you may have to let a script detect the number of characters in the top row and force a suitable fixed CSS width.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
RMI Man
post Apr 1 2019, 04:42 PM
Post #7





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



QUOTE(Christian J @ Apr 1 2019, 03:40 PM) *

That's a tricky thing to do, since normally the widest row with the most content (in this case, disclaimer) will determine to width.

Maybe there's some newer CSS3 feature that lets you do it (no idea about support in email clients), otherwise you may have to let a script detect the number of characters in the top row and force a suitable fixed CSS width.


Yeah, I was hoping for some inline style trick that’ll allow me to accomplish this trick if I setup my table and cells a specific way, but I’m lost. I really appreciate you taking a crack at it though.

This post has been edited by RMI Man: Apr 1 2019, 04:43 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 1 2019, 06:13 PM
Post #8


.
********

Group: WDG Moderators
Posts: 9,630
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 #9


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
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
Christian J
post Apr 2 2019, 07:36 AM
Post #10


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



Yes "white-space: nowrap" may work too (haven't tested either method in an email program, though).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
RMI Man
post Apr 3 2019, 12:26 PM
Post #11





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



QUOTE(Christian J @ Apr 2 2019, 06:36 AM) *

Yes "white-space: nowrap" may work too (haven't tested either method in an email program, though).

This is awesome! biggrin.gif This gave me exactly what I needed in order to achieve the needed results! Thank you so much Christian!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 3 2019, 01:13 PM
Post #12


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



You're welcome!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 3 2019, 11:06 PM
Post #13


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



What? What about me? angry.gif tongue.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 4 2019, 10:31 AM
Post #14


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



You're welcome too! laugh.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 4 2019, 10:53 AM
Post #15


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



It was my idea. ninja.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

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: 28th March 2024 - 09:01 PM