HTMLHelp Forums [Powered by Invision Power Board]

Posted by: RMI Man Apr 1 2019, 11:42 AM

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>

Posted by: RMI Man Apr 1 2019, 12:38 PM

Is it possible to get the disclaimer cell to match the width of the auto-populated row with inline styles?

Posted by: Christian J Apr 1 2019, 01:44 PM

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>

Posted by: Christian J Apr 1 2019, 01:52 PM

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>

Posted by: RMI Man Apr 1 2019, 03:54 PM

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.

Posted by: Christian J Apr 1 2019, 04: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.

Posted by: RMI Man Apr 1 2019, 04:42 PM

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.

Posted by: Christian J Apr 1 2019, 06:13 PM

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.)

Posted by: pandy Apr 1 2019, 08:37 PM

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>

Posted by: Christian J Apr 2 2019, 07:36 AM

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

Posted by: RMI Man Apr 3 2019, 12:26 PM

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!

This gave me exactly what I needed in order to achieve the needed results! Thank you so much Christian!

Posted by: Christian J Apr 3 2019, 01:13 PM

You're welcome!

Posted by: pandy Apr 3 2019, 11:06 PM

What? What about me?

Posted by: Christian J Apr 4 2019, 10:31 AM

You're welcome too!

Posted by: pandy Apr 4 2019, 10:53 AM

It was my idea.

Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Markup (HTML, XHTML, XML) _ HTML Email Cell Width Help

Posted by: RMI Man Apr 1 2019, 11:42 AM

Posted by: RMI Man Apr 1 2019, 12:38 PM

Posted by: Christian J Apr 1 2019, 01:44 PM

Posted by: Christian J Apr 1 2019, 01:52 PM

Posted by: RMI Man Apr 1 2019, 03:54 PM

Posted by: Christian J Apr 1 2019, 04:40 PM

Posted by: RMI Man Apr 1 2019, 04:42 PM

Posted by: Christian J Apr 1 2019, 06:13 PM

Posted by: pandy Apr 1 2019, 08:37 PM

Posted by: Christian J Apr 2 2019, 07:36 AM

Posted by: RMI Man Apr 3 2019, 12:26 PM

Posted by: Christian J Apr 3 2019, 01:13 PM

Posted by: pandy Apr 3 2019, 11:06 PM

Posted by: Christian J Apr 4 2019, 10:31 AM

Posted by: pandy Apr 4 2019, 10:53 AM