Как сделать горизонтальную прокрутку в письме gmail?

Question

[amadel]

Добрый день!

Помогите сделать макет письма для gmail, чтобы был блок с горизонтальной прокруткой, внутри которого находятся картинки. Сейчас gmail из такого шаблона, делает блок максимальной шириной и добавляет полоску прокрутки у всего письма.

<div style="overflow: auto;">
<table width="100%" height="300" cellspacing="0" cellpadding="0" border="0">
<tbody>
	<tr>
		<td valign="middle" style="font-size:0;line-height:0;" height="300">
			<img src="https://www.google.ru/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" border="0">
		</td>
		<td valign="middle" style="font-size:0;line-height:0;" height="300">
			<img src="https://www.google.ru/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" border="0">
		</td>
		<td valign="middle" style="font-size:0;line-height:0;" height="300">
			<img src="https://www.google.ru/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" border="0">
		</td>
		<td valign="middle" style="font-size:0;line-height:0;" height="300">
			<img src="https://www.google.ru/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" border="0">
		</td>
		<td valign="middle" style="font-size:0;line-height:0;" height="300">
			<img src="https://www.google.ru/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" border="0">
		</td>
		<td valign="middle" style="font-size:0;line-height:0;" height="300">
			<img src="https://www.google.ru/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" border="0">
		</td>
    </tr>
</tbody></table>
</div>

Возможно ли такое сделать? Заранее спасибо!

Answer 1

[Grigruss]

Вроде бы так...

<div style="overflow: auto;"><div>
<table width="100%" height="300" cellspacing="0" cellpadding="0" border="0">
<tbody>
  <tr>
    <td valign="middle" style="font-size:0;line-height:0;" height="300">
      <img src="https://www.google.ru/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" border="0">
    </td>
    <td valign="middle" style="font-size:0;line-height:0;" height="300">
      <img src="https://www.google.ru/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" border="0">
    </td>
    <td valign="middle" style="font-size:0;line-height:0;" height="300">
      <img src="https://www.google.ru/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" border="0">
    </td>
    <td valign="middle" style="font-size:0;line-height:0;" height="300">
      <img src="https://www.google.ru/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" border="0">
    </td>
    <td valign="middle" style="font-size:0;line-height:0;" height="300">
      <img src="https://www.google.ru/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" border="0">
    </td>
    <td valign="middle" style="font-size:0;line-height:0;" height="300">
      <img src="https://www.google.ru/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" border="0">
    </td>
    </tr>
</tbody></table></div>
</div>

Answer 2

[amadel]

Григорий, спасибо за помощь. Но, к сожалению, не получилось, все равно появляется полоска прокрутки для всего письма, не для таблицы:

Answer 3

[Rithmsamba]

Задайте ширину самому div, например <div style="width: 80%; overflow: auto;"></div>