Перейти к содержанию
WOrmy

Картинка и таблица с overflow в одну строку

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

Всем доброго времени. В карточке товара (сайт shopchampion.ru) есть вкладка таблица размеров. Нужно сделать чтобы в этой вкладке в обычной версии сайта картинки были слева от таблиц, но чтобы при этом в мобильной версии ничего не поехало.Если родителям таблицы и картинки добавить inline-block в мобильной версии сайта справа появляется пробел( по сути не работает overflow у таблицы).

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

Спойлер

<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>

 

Поделиться сообщением


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

А зачем такие костыли при наличии bootstrap?

Сделайте нужную сетку для элементов.

Заверните оба дива в див c классом row.

Первый вложенный див с классами: col-xs-12 col-sm-2 col-md-4 col-lg-4 

Второй див с таблицей с классами: col-xs-12 col-sm-10 col-md-8 col-lg-8

Это для примера. Там уже выбирайте нужное соотношение.

 

  • +1 1

Поделиться сообщением


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

Для публикации сообщений создайте учётную запись или авторизуйтесь

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

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

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

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