电子邮件的动态高度 100% td答案

【问题标题】：Dynamic height 100% td for email电子邮件的动态高度 100% td
【发布时间】：2019-06-18 11:11:28
【问题描述】：

在表格电子邮件的上下文中。我正在寻找我的单元格列的动态高度宽度图像，未知高度由我在行跨度中的内容动态定义：

* {padding: 0;}
table { border-collapse: collapse; }
img {width: 100%; height: 100%; display: block; }

<table width="300">
  <tr>
    <td colspan="3" height="20" width="100%"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=" /></td>
  </tr>
  <tr>
    <td width="20" height="20">
      <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=" />
    </td>
    <td rowspan="2" width="260" align="top">
      my content dynamic<br />
      my content dynamic<br />
      my content dynamic<br />
      my content dynamic<br />
      my content dynamic<br />
      my content dynamic
    </td>
    <td width="20" height="20">
      <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=" />
      </td>
  </tr>
  <tr>
    <td width="20" height="100%">
      <img src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8zxDxHwAFtQJYX0yrrAAAAABJRU5ErkJggg==" />
      </td>
    <td width="20" height="100%">
      <img src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8zxDxHwAFtQJYX0yrrAAAAABJRU5ErkJggg==" />
    </td>
  </tr>
</table>

在我的示例中，这是我想要的 2 个粉色列，高度为 100%。这是一封电子邮件，所以我不能使用绝对位置或 JS 技巧（根据caniuse for email 覆盖最多的客户）

【问题讨论】：

标签： css html-table html-email

【解决方案1】：

只需给粉红色的单元格添加bgColor 属性即可。

* {padding: 0;}
table { border-collapse: collapse; }
img {width: 100%; height: 100%; display: block; }

<table width="300">
  <tr>
    <td colspan="3" height="20" width="100%"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=" /></td>
  </tr>
  
  <tr>
    <td width="20" height="20">
      <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=" />
    </td>
    <td rowspan="2" width="260" align="top">
      my content dynamic<br /> my content dynamic<br /> my content dynamic<br /> my content dynamic<br /> my content dynamic<br /> my content dynamic
    </td>
    <td width="20" height="20">
      <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=" />
    </td>
  </tr>
  <tr>
    <td width="20" bgColor="#ff0458">
      <img src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8zxDxHwAFtQJYX0yrrAAAAABJRU5ErkJggg==" />
    </td>
    <td width="20" bgColor="#ff0458">
      <img src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8zxDxHwAFtQJYX0yrrAAAAABJRU5ErkJggg==" />
    </td>
  </tr>
</table>

【讨论】：