Перейти к публикации
Поиск в
  • Дополнительно...
Искать результаты, содержащие...
Искать результаты в...

Картинка и таблица в один ряд


WOrmy
 Поделиться

Рекомендованные сообщения

Всем доброго времени. В карточке товара (сайт shopchampion.ru) есть вкладка таблица размеров. Хочу сделать чтобы в этой вкладке в обычной версии сайта картинки были слева от таблиц, но чтобы при этом в мобильной версии ничего не поехало. Голову уже сломал.

Пример участка кода:

<div><img alt="Замер размера щитков" src="https://shopchampion.ru/image/data/sizetable/razmer_schitki.jpg" style="padding: 5px 0px;float: left; margin-right:10px;width:120px;" /></div>
<div style="clear:both; margin-bottom:20px;overflow-x: auto;">
<table border="2" cellpadding="2" cellspacing="2" style="border-color: rgb(204, 204, 204); width: 100%; text-align: center; background-color: rgb(238, 238, 238);">
	<tbody>
		<tr>
			<td style="width: 150px; text-align: left; ">Щитки</td>
			<td colspan="2" style="text-align: left;">Детские/Youth</td>
			<td colspan="4" style="text-align: left;">Юниорские/Junior</td>
			<td colspan="5" style="text-align: left;">Взрослые/Senior</td>
		</tr>
		<tr>
			<td style="width: 150px; text-align: left; ">Размер</td>
			<td style="text-align: left;">8</td>
			<td style="text-align: left;">9</td>
			<td style="text-align: left;">10</td>
			<td style="text-align: left;">11</td>
			<td style="text-align: left;">12</td>
			<td style="text-align: left;">13</td>
			<td style="text-align: left;">14</td>
			<td style="text-align: left;">15</td>
			<td style="text-align: left;">16</td>
			<td style="text-align: left;">17</td>
			<td style="text-align: left;">18</td>
		</tr>
		<tr>
			<td style="width: 150px; text-align: left; ">Размер, US</td>
			<td style="text-align: left;">S</td>
			<td style="text-align: left;">L</td>
			<td style="text-align: left;">S</td>
			<td style="text-align: left;">M</td>
			<td style="text-align: left;">L</td>
			<td style="text-align: left;">XL</td>
			<td style="text-align: left;">S</td>
			<td style="text-align: left;">M</td>
			<td style="text-align: left;">L</td>
			<td style="text-align: left;">XL</td>
			<td style="text-align: left;">XXL</td>
		</tr>
		<tr>
			<td style="width: 150px; text-align: left; ">Длина, см</td>
			<td style="text-align: left;">20-23</td>
			<td style="text-align: left;">23-25</td>
			<td style="text-align: left;">25-28</td>
			<td style="text-align: left;">28-30</td>
			<td style="text-align: left;">30-33</td>
			<td style="text-align: left;">33-36</td>
			<td style="text-align: left;">36-38</td>
			<td style="text-align: left;">38-41</td>
			<td style="text-align: left;">41-43</td>
			<td style="text-align: left;">43+</td>
			<td style="text-align: left;">43+</td>
		</tr>
		<tr>
			<td style="width: 150px; text-align: left; ">Примерный рост игрока, см</td>
			<td style="text-align: left;">100-110</td>
			<td style="text-align: left;">110-120</td>
			<td style="text-align: left;">120-130</td>
			<td style="text-align: left;">130-140</td>
			<td style="text-align: left;">140-150</td>
			<td style="text-align: left;">150-160</td>
			<td style="text-align: left;">160-170</td>
			<td style="text-align: left;">170-180</td>
			<td style="text-align: left;">180-190</td>
			<td style="text-align: left;">190+</td>
			<td style="text-align: left;">190+</td>
		</tr>
		<tr>
			<td style="width: 150px; text-align: left; ">Примерный возраст игрока</td>
			<td colspan="2" style="text-align: left;">4-9 лет</td>
			<td colspan="4" style="text-align: left;">8-14 лет</td>
			<td colspan="5" style="text-align: left;">14+ лет</td>
		</tr>
	</tbody>
</table>
</div>

 

Ссылка на комментарий
Поделиться на других сайтах


блокам родителям картинки и таблицы дайте классы и display: inline block

ну и размер какой нибудь 

Ссылка на комментарий
Поделиться на других сайтах


19 минут назад, prived сказал:

блокам родителям картинки и таблицы дайте классы и display: inline block

ну и размер какой нибудь 

В мобильной версии таблица не переносится на новую строку и справа образуется лишнее пространство

Ссылка на комментарий
Поделиться на других сайтах


52 минуты назад, WOrmy сказал:

В мобильной версии таблица не переносится на новую строку и справа образуется лишнее пространство

ну так стилями дальше правьте

Ссылка на комментарий
Поделиться на других сайтах


Создайте аккаунт или войдите в него для комментирования

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

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас
 Поделиться

  • Сейчас на странице   0 пользователей

    • Нет пользователей, просматривающих эту страницу.
×
×
  • Создать...

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.