Как сделать фон в табличной вёрстке?

Question

Андрей Зуев @cozaster

Как сделать фон в табличной вёрстке?

Как блок выглядит в браузере на ПК: joxi.ru/RmzoyjvI6YXZ2O

Необходимо, что бы в этих местах joxi.ru/zAN637Qtbvl8A9 была заливка белым цветом, что бы полоска между блоками оставалась joxi.ru/ZrJkKxEuJwMlmj , создавая образ двух отдельных блоков.
+ Нужно, что бы блоки в мобильной версии вставали ровно под друг другом.

<!-- нов.блок -->
				<tr>
					<td class="three-column" bgcolor="#e4f1f9" style="padding: 0px 0px 0px 0px;">
						<table width="100%" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
							<tr>
								<td class="two-column" align="center" style="padding:0px 0px; font-size:0;">
									<!--[if (gte mso 9)|(IE)]>
									<table width="100%" cellpadding="0" cellspacing="0" style="border-collapse: collapse; font-family:sans-serif;">
										<tr>
											<td width="50%" valign="top" align="center" style="padding:0;">
												<![endif]-->
												<div class="two-column" style="width:100%; max-width:296px; display:inline-block; vertical-align:top;">
													<table bgcolor="#e4f1f9" width="100%" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
														<tr>
															<td align="center" style="padding:0px 0px 0px 0px;">
																<table align="center" cellpadding="0" cellspacing="0" style="border-collapse: collapse; width:100%;">
																	<tr>
																		<td align="center" style="padding:0; font-size: 0;">
																			<a href="ССЫЛКА" target="_blank" style="text-decoration:none;">
																				<img src="http://s41.radikal.ru/i094/1706/6c/a655b9ddf22b.jpg" alt="" style="border-width:0; width:100%; height:auto;">
																			</a>
																		</td>
																	</tr>
																	<tr>
																		<td bgcolor="#ffffff" align="center" class="text" style="padding: 20px 0px 13px 0px; width: 100%; font-family: Verdana, sans-serif; color:#66ccff; font-size: 13px; line-height: 18px;"> 
																			<span style="font-family: Verdana, sans-serif; color:#66ccff; font-size: 13px; line-height: 18px;"> КАТЕГОРИЯ </span>
																		</td>
																	</tr>
																	<tr>
																		<td valign="top" bgcolor="#ffffff" align="center" class="text" style="padding: 0px 0px 25px 0px; width: 100%; color:#000000 !important; text-decoration:underline; "> 
																			<a href="ССЫЛКА" target="_blank" style="color:#000000 !important; text-decoration:underline;">
																				<span style="font-family: Verdana, sans-serif; color:#000000; font-size: 14px; line-height: 16px;">
																					Ссылка на товар
																				</span>
																			</a>
																		</td>
																	</tr>
																</table>
															</td>
														</tr>
													</table>
												</div>
												<!--[if (gte mso 9)|(IE)]>
											</td>
											<td width="50%" valign="top" align="center" style="padding:0;">
												<![endif]-->
												<div class="three-column" style="width:100%; max-width:8px; display:inline-block; vertical-align:top;">
													<table bgcolor="#e4f1f9" width="100%" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">										
													</table>
												</div>
												<!--[if (gte mso 9)|(IE)]>
											</td>
											<td width="50%" valign="top" align="center" style="padding:0;">
												<![endif]-->
												<div class="three-column" style="width:100%; max-width:296px; display:inline-block; vertical-align:top;">
													<table bgcolor="#e4f1f9" width="100%" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
														<tr>
															<td align="center" style="padding:0px 0px 0px 0px;">
																<table align="center" cellpadding="0" cellspacing="0" style="border-collapse: collapse; font-family:sans-serif; width:100%;">
																	<tr>
																		<td align="center" style="padding:0; font-size: 0;">
																			<a href="ССЫЛКА" target="_blank" style="text-decoration:none;">
																				<img src="http://s41.radikal.ru/i094/1706/6c/a655b9ddf22b.jpg" alt="" style="border-width:0; width:100%; height:auto;">
																			</a>
																		</td>
																	</tr>
																	<tr>
																		<td bgcolor="#ffffff" align="center" class="text" style="padding: 20px 0px 13px 0px; width: 100%; font-family: Verdana, sans-serif; color:#66ccff; font-size: 13px; line-height: 18px;"> 
																			<span style="font-family: Verdana, sans-serif; color:#66ccff; font-size: 13px; line-height: 18px;"> КАТЕГОРИЯ </span>
																		</td>
																	</tr>
																	<tr>
																		<td valign="top" bgcolor="#ffffff" align="center" class="text" style="padding: 0px 0px 25px 0px; width: 100%; color:#000000 !important; text-decoration:underline; "> 
																			<a href="ССЫЛКА" target="_blank" style="color:#000000 !important; text-decoration:underline;">
																				<span style="font-family: Verdana, sans-serif; color:#000000; font-size: 14px; line-height: 16px;">
																					Ссылка на товар
																				</span>
																			</a>
																		</td>
																	</tr>
																</table>
															</td>
														</tr>
													</table>
												</div>
												<!--[if (gte mso 9)|(IE)]>
											</td>
										</tr>
									</table>
									<![endif]-->
								</td>
							</tr>
						</table>
					</td>
				</tr>
<!-- // нов.блок // -->

Вопрос задан более трёх лет назад
464 просмотра

Комментировать

Подписаться Оценить Комментировать

Решения вопроса 1

2 комментария

Андрей Зуев @cozaster Автор вопроса

Табличная вёрстка, потому что данные блоки верстаются под почтовые клиенты. Это Email письмо

Написано более трёх лет назад

Максим Тимофеев @webinar

Андрей Зуев: Тогда надо каждый элемент, который должен съезжать на мобилке делать не с помощью tr, а с помощью table, пример:

<table width="640" border="0" cellpadding="0" cellspacing="0">
<tr>
    <td>
    <table width="320" border="0" cellspacing="0" cellpadding="20" align="left">
      <tr>
        <td><p>Column Left Content</p></td>
      </tr>
    </table>
    <table width="320" border="0" cellspacing="0" cellpadding="20" align="right">
      <tr>
        <td><p>Column Right Content</p></td>
      </tr>
    </table>
    </td>
  </tr>
</table>

Вот тут почитушки по Вашей теме:
https://habrahabr.ru/company/pechkin/blog/256853/

Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 1

Комментировать

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

JavaScript

+3 ещё

Простой
Почему приходят пустые данные с формы на почту?
- 1 подписчик
- 2 часа назад
- 40 просмотров
1

ответ
HTML

Простой
Не получается поставить поисковую строку справа, что сделать чтобы исправить?
- 1 подписчик
- 17 часов назад
- 53 просмотра
0

ответов
HTML

Простой
С чем может быть связано не правильный вывод изображений?
- 1 подписчик
- 20 часов назад
- 182 просмотра
1

ответ
JavaScript

+1 ещё

Средний
Как задать img источник из svg inline?
- 1 подписчик
- вчера
- 109 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Смена стилей шапки сайта при скролле к определенному блоку? Стили должны применяться при скролле до блока и отменяться за его пределами?
- 1 подписчик
- вчера
- 59 просмотров
1

ответ
JavaScript

+1 ещё

Средний
Как сделать так, чтобы клик по object передавался родителю?
- 1 подписчик
- вчера
- 99 просмотров
2

ответа
HTML

+1 ещё

Простой
Можно ли изменить цвет шрифта снаружи для тега у которого цвет прописан внутри?
- 1 подписчик
- вчера
- 65 просмотров
2

ответа
HTML

+1 ещё

Простой
Как поместить картинку рядом с текстом?
- 1 подписчик
- 23 апр.
- 86 просмотров
2

ответа
HTML

+1 ещё

Средний
Как в файле svg заставить работать события?
- 3 подписчика
- 23 апр.
- 714 просмотров
2

ответа
HTML

+1 ещё

Простой
Почему верхние и нижние внешние отступы пустого блока не схлопываются?
- 2 подписчика
- 22 апр.
- 214 просмотров
4

ответа
Показать ещё Загружается…

Тестировщик-стажёр

ITooLabs • Тула

от 35 000 до 40 000 ₽

Fullstack PHP Developer

Smapse Education

от 40 000 до 65 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

Прием WebRTC через Socket io в unity c#

26 апр. 2024, в 13:12

2000 руб./за проект

Настроить AmoCrm для туристического агентства

26 апр. 2024, в 13:06

500 руб./в час

Доработка функционала десктоп приложения (CRM) для Windows

26 апр. 2024, в 13:00

30000 руб./за проект

Answer 1 · 2017-06-26 18:23:59

Нужно, что бы блоки в мобильной версии вставали ровно под друг другом

для табличной верстки такие прелести не сделать, без танцев с бубном? Зачем табличная верстка? Если надо респонсив дизайн?

Необходимо, что бы в этих местах была заливка белым цветом

ну и в чем проблема? делаете background-color: #fff;

что бы полоска между блоками оставалась, создавая образ двух отдельных блоков

Либо прозрачный border либо cellspacing
cellspacing - Задает расстояние между внешними границами ячеек

Честно говоря сайтов верстанных таблицами уже лет 10 не видел. В письмах иногда встречается, но в сайте? Это зачем так?

Answer 2 · 2017-06-27 08:00:54

ставьте фон ячейкам, строкам или всей таблице. медиазапросы и css стили сделайт из таблицы что угодно, хоть flexbox

Как сделать фон в табличной вёрстке?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт