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

Question

[Андрей Зуев]

Как блок выглядит в браузере на ПК: 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>
<!-- // нов.блок // -->

Answer 1

[Максим Тимофеев]

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

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

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

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

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

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

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

Comments

[Андрей Зуев]

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

[Максим Тимофеев]

Андрей Зуев: Тогда надо каждый элемент, который должен съезжать на мобилке делать не с помощью 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/

Answer 2

[devstudent]

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