在表格电子邮件的上下文中。我正在寻找我的单元格列的动态高度宽度图像,未知高度由我在 rowspan 中的内容动态定义:
* {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>
在我的示例中,这是我想要的高度为 100% 的 2 个粉红色列。它用于电子邮件,所以我不能使用绝对位置或 JS 技巧(根据 caniuse for email 以覆盖最多客户)
最佳答案
只需给粉色单元格一个 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>
关于css - 电子邮件的动态高度 100% td,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54351349/