HTML Email Cell Width Help |
HTML Email Cell Width Help |
RMI Man |
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> |
RMI Man |
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?
|
Christian J |
Apr 1 2019, 01:44 PM
Post
#3
|
. Group: WDG Moderators Posts: 9,653 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> |
Christian J |
Apr 1 2019, 01:52 PM
Post
#4
|
. Group: WDG Moderators Posts: 9,653 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> |
RMI Man |
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.
|
Christian J |
Apr 1 2019, 04:40 PM
Post
#6
|
. Group: WDG Moderators Posts: 9,653 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. |
RMI Man |
Apr 1 2019, 04:42 PM
Post
#7
|
Group: Members Posts: 5 Joined: 1-April 19 Member No.: 26,867 |
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 |
Christian J |
Apr 1 2019, 06:13 PM
Post
#8
|
. Group: WDG Moderators Posts: 9,653 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 entities instead of PRE, but then some characters like hyphens may still cause linebreaks to happen.) |
pandy |
Apr 1 2019, 08:37 PM
Post
#9
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 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> |
Christian J |
Apr 2 2019, 07:36 AM
Post
#10
|
. Group: WDG Moderators Posts: 9,653 Joined: 10-August 06 Member No.: 7 |
Yes "white-space: nowrap" may work too (haven't tested either method in an email program, though).
|
RMI Man |
Apr 3 2019, 12:26 PM
Post
#11
|
Group: Members Posts: 5 Joined: 1-April 19 Member No.: 26,867 |
|
Christian J |
Apr 3 2019, 01:13 PM
Post
#12
|
. Group: WDG Moderators Posts: 9,653 Joined: 10-August 06 Member No.: 7 |
You're welcome!
|
pandy |
Apr 3 2019, 11:06 PM
Post
#13
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
What? What about me?
|
Christian J |
Apr 4 2019, 10:31 AM
Post
#14
|
. Group: WDG Moderators Posts: 9,653 Joined: 10-August 06 Member No.: 7 |
You're welcome too!
|
pandy |
Apr 4 2019, 10:53 AM
Post
#15
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
It was my idea.
|
Lo-Fi Version | Time is now: 19th April 2024 - 06:36 AM |