Динамическая высота 100% тд для электронной почты - PullRequest
Новая
       6

Динамическая высота 100% тд для электронной почты

0 голосов
/ 24 января 2019

В контексте рассылки таблицы. Я ищу динамическое изображение высоты ширины столбца моей ячейки, неизвестная высота динамически определяется моим содержимым в строке: 

* {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 для электронной почты для покрытия максимум клиентов)

1 Ответ

0 голосов
/ 24 января 2019

Просто дайте розовым клеткам атрибут 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>
...