TD is not going 100% and the text should be vertically middle align

I am working on an HTML emailer and I am getting two issues

  1. In the message content, I set td width:100% for the second row but still, I am not getting it. I have to show end to end.
  2. Socia icons, I have to display the logo and the text(text is my company name ) and I have to display the vertically middle beside the logo.

for example

------------
logo | text 
------------

The below is the full code

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600&display=swap');
body,
table,
thead,
tbody,
tr,
td,
img {
  padding: 0;
  margin: 0;
  border: none;
  border-spacing: 0px;
  border-collapse: collapse;
  vertical-align: top;
  font-family: 'Rubik', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
  padding: 0;
  padding-bottom: 20px;
  line-height: 1.6;
}

h2 {
  font-size: 28px;
}
<table role="presentation" style="width:700px;background:#ffffff;margin: auto;">
  <tbody>
    <tr>
      <td>

        <table style=" table-layout: fixed ;width: 100%;">
          <tr>
            <td style="width:50%;"><strong>Time:-</strong><span>12:25pm</span></td>
            <td style="width:50%;"><strong>Date:-</strong><span>11/06/2021</span></td>

          </tr>
          <tr>
            <td style="width:100%"><strong>Message:-</strong><span>is simply dummy text of the printing and typesetting next map.</span></td>
          </tr>
        </table>
      </td>
    </tr>

    <tr>
      <td style="padding-top:20px ;">
        <table>
          <tbody>
            <tr>
              <td>
                <a href="" style="text-decoration:none;"><img src="https://image.flaticon.com/icons/png/512/174/174857.png" width="40px"><span>XYZ</span></a>
              </td>
              <td>
                <a href="" style="text-decoration:none;"><img src="https://image.flaticon.com/icons/png/512/733/733547.png" width="40px"><span>XYZ</span></a>
              </td>
              <td>
                <a href="" style="text-decoration:none;"><img src="https://image.flaticon.com/icons/png/512/733/733558.png" width="40px"><span>XYZ</span></a>
              </td>
            </tr>

          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>



Read more here: https://stackoverflow.com/questions/67943213/td-is-not-going-100-and-the-text-should-be-vertically-middle-align

Content Attribution

This content was originally published by user9437856 at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: