Align top and bottom in one cell email-CodePudding

So, as title says, I do a two rows email template by using tables and I have a button which needs to be at the bottom of the rows container, the problem is that I need to use vertical align top to the cell where button is located. Also there is forbidden to use negative margin, flexbox, absolute positioning because it's poorly supported in emails.

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body style="margin: 0; padding: 0">
  <table align="center" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse; border: 1px solid;">
    <tr>
      <td style="width: 65%; border: 1px solid red; vertical-align: top;">
        <table>
          <tr>
            <td>
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem veniam ut quos esse recusandae accusantium aut, nemo laboriosam voluptatem libero nisi
            </td>
          </tr>
          <tr>
            <td>
              <a 
                 
                target="_blank" 
                href="" 
                style="
                  font-size: 15px;
                  color: #ffffff;
                  display: block;
                  text-align: center;
                  padding: 13px 0px;
                  max-width: 50%;
                  text-decoration: none;
                  background-color: #2dbbeb;
                  cursor: pointer;
              ">open</a>
            </td>
          </tr>
        </table>
      </td>
      <td style="width: 35%; height: 300px; border: 1px solid green; vertical-align: top; padding-top: 20px;">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloremque reiciendis laboriosam nostrum quae, velit harum ratione reprehenderit asperiores eum nam earum illum atque. Fuga quaerat nisi deleniti voluptatem reprehenderit numquam.
      </td>
    </tr>
  </table>
</body>
</html>

<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body style="margin: 0; padding: 0">
  <table align="center" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse; border: 1px solid;">
    <tr>
      <td style="width: 65%; border: 1px solid red; vertical-align: top;">
        <table>
          <tr>
            <td>
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem veniam ut quos esse recusandae accusantium aut, nemo laboriosam voluptatem libero nisi
            </td>
          </tr>
          <tr>
            <td>
              <a 
                 
                target="_blank" 
                href="" 
                style="
                  font-size: 15px;
                  color: #ffffff;
                  display: block;
                  text-align: center;
                  padding: 13px 0px;
                  max-width: 50%;
                  text-decoration: none;
                  background-color: #2dbbeb;
                  cursor: pointer;
              ">open</a>
            </td>
          </tr>
        </table>
      </td>
      <td style="width: 35%; height: 300px; border: 1px solid green; vertical-align: top; padding-top: 20px;">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloremque reiciendis laboriosam nostrum quae, velit harum ratione reprehenderit asperiores eum nam earum illum atque. Fuga quaerat nisi deleniti voluptatem reprehenderit numquam.
      </td>
    </tr>
  </table>
</body>
</html>

CodePudding user response：

You should use vertical-align

add this for tr:

tr{
height: 300px;
vertical-align: bottom;
}

CodePudding user response：

You gave the right column a height of 300px, so do that for the left column too (and the padding-top if desired). Then, you can set the first <tr> with a vertical-align:top, and the second with vertical-align:bottom. You'll also need the parent table to be height 100%.

I haven't tested this in email, but also note the height might change on mobiles, where the columns are squashed with smaller width.

<table align="center" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse; border: 1px solid;">
    <tbody><tr>
      <td style="width: 65%;border: 1px solid red;vertical-align: top;height: 300px;padding-top: 20px;">
        <table style="height: 100%;">
          <tbody><tr style="vertical-align: top;">
            <td>
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem veniam ut quos esse recusandae accusantium aut, nemo laboriosam voluptatem libero nisi
            </td>
          </tr>
          <tr>
            <td style="vertical-align: bottom;">
              <a  target="_blank" href="" style="
                  font-size: 15px;
                  color: #ffffff;
                  display: block;
                  text-align: center;
                  padding: 13px 0px;
                  max-width: 50%;
                  text-decoration: none;
                  background-color: #2dbbeb;
                  cursor: pointer;
              ">open</a>
            </td>
          </tr>
        </tbody></table>
      </td>
      <td style="width: 35%; height: 300px; border: 1px solid green; vertical-align: top; padding-top: 20px;">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloremque reiciendis laboriosam nostrum quae, velit harum ratione reprehenderit asperiores eum nam earum illum atque. Fuga quaerat nisi deleniti voluptatem reprehenderit numquam.
      </td>
    </tr>
  </tbody></table>