X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость ( Вход | Регистрация )

Открыть тему
Тема закрыта
> Как сделать адаптивной таблицу!, У кого какие варианты
Sev_free
Sev_free
Topic Starter сообщение 2.7.2015, 17:35; Ответить: Sev_free
Сообщение #1


Частый гость
**

Группа: User
Сообщений: 97
Регистрация: 19.6.2015
Из: Севастополь
Поблагодарили: 18 раз
Репутация:   2  


Вот сам код:
Развернуть/Свернуть

Код
<div id="wpshop_cart">
<table class="recycle_bin" cellspacing="0" cellpadding="5" border="0">
<thead>
<tr>
<th class="name">Наименование</th>
<th class="type"></th>
<th class="cost">Цена (руб.)</th>
<th class="num">Кол-во</th>
<th class="total">Сумма (руб.)</th>
<th class="delete"> </th>
</tr>
</thead>
<tbody>
<tr class="rb_item" valign="top">
<td class="rb_name">
<a href="http://www.pureprotein-msc.ru/protein-multikomponentnyj/">Протеин мультикомпонентный</a>
</td>
<td class="rb_type">Шоколадное печенье </td>
<td class="rb_cost">940</td>
<td class="rb_num">
<a class="minus" onmousedown="__cart.minus('7556', 'Шоколадное печенье', 1,0); return false;" href="#">−</a>
<a class="plus" onmousedown="__cart.plus('7556', 'Шоколадное печенье', 1,0); return false;" href="#">+</a>
<input type="text" onchange="__cart.set('7556', 'Шоколадное печенье', this.value,0); return false;" maxlength="6" size="3" value="1">
</td>
<td class="rb_total">940</td>
<td class="rb_delete">
<a style="text-decoration:none; color:#f00;" onclick="__cart.remove('7556', 'Шоколадное печенье',0); return false;" href="#" title="Удалить">×</a>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td align="right" colspan="4">
<strong>ИТОГО:</strong>
</td>
<td class="rb_total cost">
<strong>940</strong>
</td>
<td class="rb_delete">
<a style="text-decoration:none; color:#f00;" onclick="if (confirm('Очистить корзину?')) __cart.reset(); return false;" href="#" title="Удалить все">×</a>
</td>
</tr>
<tr id="delivery_cost" style="display:none;text-align:right;margin-top:15px">
<td style="font-weight:bold" colspan="4">
Стоимость с учетом доставки (
<span id="delivery_cost_value"></span>
руб.)
</td>
<td id="delivery_cost_total" style="text-align:left;font-weight:bold"></td>
<td></td>
</tr>
</tfoot>
</table>
</div>
<table id="payments-table">
<thead id="mode-paymets-title">
<tr>
<th colspan="4">Выберите способ оплаты:</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="http://www.pureprotein-msc.ru/?wpshopcarts=vizit&payment=vizit">
<img title="Самовывоз - Филевский бульвар" src="http://www.pureprotein-msc.ru/wp-content/plugins/wp-shop/images/payments/vizit.gif">
</a>
<br>
<a href="http://www.pureprotein-msc.ru/?wpshopcarts=vizit&payment=vizit">Самовывоз - Филевский бульвар</a>
</td>
<td>
<a href="http://www.pureprotein-msc.ru/?wpshopcarts=cash&payment=cash">
<img title="Наличными курьеру" src="http://www.pureprotein-msc.ru/wp-content/plugins/wp-shop/images/payments/nal.gif">
</a>
<br>
<a href="http://www.pureprotein-msc.ru/?wpshopcarts=cash&payment=cash">Наличными курьеру</a>
</td>
<td>
<a href="http://www.pureprotein-msc.ru/?wpshopcarts=post&payment=post">
<img title="Доставка по России (предоплата)" src="http://www.pureprotein-msc.ru/wp-content/plugins/wp-shop/images/payments/post.gif">
</a>
<br>
<a href="http://www.pureprotein-msc.ru/?wpshopcarts=post&payment=post">Доставка по России (предоплата)</a>
</td>
<td>
<a href="http://www.pureprotein-msc.ru/?wpshopcarts=wm&payment=wm">
<img title="Web-Money" src="http://www.pureprotein-msc.ru/wp-content/plugins/wp-shop/images/payments/wm.gif">
</a>
<br>
<a href="http://www.pureprotein-msc.ru/?wpshopcarts=wm&payment=wm">Web-Money</a>
</td>
</tr>
</tbody>
</table></div></div>


Основная проблема в том, что это нужно сделать на экран в 200px.
П.С. Я уже себе всю думалку сломал.


--------------------
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
lostprophet
lostprophet
сообщение 2.7.2015, 17:41; Ответить: lostprophet
Сообщение #2


Новый статус (1)
*******

Группа: Super Moderator
Сообщений: 2574
Регистрация: 18.11.2008
Из: Ростов-на-Дону
Поблагодарили: 3211 раз
Репутация:   293  


1. https://css-tricks.com/responsive-data-tables/
2. http://exisweb.net/responsive-table-plugins-and-patterns
3. http://johnpolacek.github.io/stacktable.js/

P.S. PureProtein - плохой)


--------------------


Поблагодарили: (3)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Sev_free
Sev_free
Topic Starter сообщение 2.7.2015, 18:21; Ответить: Sev_free
Сообщение #3


Частый гость
**

Группа: User
Сообщений: 97
Регистрация: 19.6.2015
Из: Севастополь
Поблагодарили: 18 раз
Репутация:   2  


lostprophet, не подходит, и не могу найти код некоторых вещей в wp-shop.... например верхушку он берет не с шаблона, я так понимаю.


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
lostprophet
lostprophet
сообщение 2.7.2015, 18:52; Ответить: lostprophet
Сообщение #4


Новый статус (1)
*******

Группа: Super Moderator
Сообщений: 2574
Регистрация: 18.11.2008
Из: Ростов-на-Дону
Поблагодарили: 3211 раз
Репутация:   293  


Sev_free, спокойнее, первая ссылка - чистый css, ничего выдумывать не нужно. Просто еще раз спокойно посмотрите.


--------------------


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Sev_free
Sev_free
Topic Starter сообщение 2.7.2015, 21:29; Ответить: Sev_free
Сообщение #5


Частый гость
**

Группа: User
Сообщений: 97
Регистрация: 19.6.2015
Из: Севастополь
Поблагодарили: 18 раз
Репутация:   2  


lostprophet, спасибо, успокоился,покумекал и сделал чуть подругому) Перебрал скрипт и обернул все дивами)

Вернее сделал свою div таблицу)

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыкак сохранить на компьютер баннер html5 ?
9 lamun 619 Вчера, 23:18
автор: lamun
Открытая тема (нет новых ответов) Как зайти через прокси в Webmoney?
8 metvekot 783 Вчера, 22:48
автор: anchous
Открытая тема (нет новых ответов) Как обменять WM в Apple приложении?
1 GlazunOFF 404 26.5.2018, 18:25
автор: JOHNY
Открытая тема (нет новых ответов) Как закачать файлы на фтп прямо из другого фтп?
Сабж
1 stixia007 393 25.5.2018, 15:22
автор: wertu
Открытая тема (нет новых ответов) Как защитить свои данные в общественном Wi-Fi?
9 unazekoff 361 25.5.2018, 10:22
автор: spomoni


 



RSS Текстовая версия Сейчас: 28.5.2018, 0:21
Дизайн