Адаптивные таблицы

[OutofControl]

Здравствуйте  ребята демократы и другие  (только не "ахтунги")

"ахтунг" - (перевод -  "внимание"), но в нашем сленге, это пидерасты ... ну так, что бы знали

Теперь о сути вопроса ...

Что бы обозначить услуги, мне пришлось воспользоваться таблицей:

http://dl3.joxi.net/drive/2017/02/04/0015/0597/1020501/01/b75c9e7ef6.jpg

http://joxi.ru/4AkyBGpcykqZLm

 

Но при просмотре сайта со смартфона, таблица не адаптируется под него ...

Подскажите пожалуйста решение этого вопроса ... как лучше сделать?

http://магазин.цбу-рф.рф

 

Спасибо огромное

 

 

 

 

[efremovav]

Таблицы не могут быть адаптивными - нужно переделывать верстку с помощью блоков div.

[thentru]

оберните таблицу в div с классом .table-responsive
https://itchief.ru/lessons/bootstrap-3/30-bootstrap-3-tables

Змінено 4 лютого 2017 користувачем thentru

[efremovav]

Ну, или так)) Не посмотрел что там bootstrap.

[OutofControl]

1 час назад, thentru сказал:

оберните таблицу в div с классом .table-responsive
https://itchief.ru/lessons/bootstrap-3/30-bootstrap-3-tables

Почему то не сохраняет, когда пытаюсь обернуть 

http://joxi.ru/MAj3Yp1t4kPRar

http://joxi.ru/EA4Q76kIwpQPkr

http://joxi.ru/82QZoqYfj95D0A

http://joxi.ru/Q2K5J0pf4vxbKr

Спасибо

 

[efremovav]

Попробуйте не в div оборачивать, а для table дописать класс "table-responsive" 

[OutofControl]

15 минут назад, efremovav сказал:

Попробуйте не в div оборачивать, а для table дописать класс "table-responsive" 

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

Использую дефолтный шаблон Opencart 2.3.0.2

Змінено 4 лютого 2017 користувачем OutofControl

[efremovav]

Там же, где див добавляли, где <table class="table table-bordered"> впишите через пробел класс table-responsive. А с div у вас не сохранилось, потому что возможно закрывающий тег </div> не поставили в конце.

[OutofControl]

8 минут назад, efremovav сказал:

Там же, где див добавляли, где <table class="table table-bordered"> впишите через пробел класс table-responsive. А с div у вас не сохранилось, потому что возможно закрывающий тег </div> не поставили в конце.

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

 

bandicam_2017-02-04_20-49-14-239.avi

[thentru]

проверено на версии ocStore 2.1.0.2.1
у вас какая версия движка?

попробуйте очистить и из примера вставить код

Скрытый текст

    <div class="table-responsive"> 
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>№ п/п</th>
                <th>Имя</th>
                <th>Фамилия</th>
                <th>E-mail</th>
                <th>Увлечения</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Иван</td>
                <td>Чмель</td>
                <td>[email protected]</td>
                <td>Плавание, бодибилдинг, боевые искусства</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Петр</td>
                <td>Щербаков</td>
                <td>[email protected]</td>
                <td>Европейские танцы, Стрип-денс, Ролики</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Юрий</td>
                <td>Голов</td>
                <td>[email protected]</td>
                <td>Горный велосипед, скейтборд, катание на квадрацикле</td>
            </tr>
        </tbody>
    </table>
    </div> 

 

 

Змінено 4 лютого 2017 користувачем thentru

[OutofControl]

3 минуты назад, thentru сказал:

проверено на версии ocStore 2.1.0.2.1
у вас какая версия движка?

Использую дефолтный шаблон Opencart 2.3.0.2

[OutofControl]

12 минут назад, thentru сказал:

проверено на версии ocStore 2.1.0.2.1
у вас какая версия движка?

попробуйте очистить и из примера вставить код

  Скрыть контент

    <div class="table-responsive"> 
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>№ п/п</th>
                <th>Имя</th>
                <th>Фамилия</th>
                <th>E-mail</th>
                <th>Увлечения</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Иван</td>
                <td>Чмель</td>
                <td>[email protected]</td>
                <td>Плавание, бодибилдинг, боевые искусства</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Петр</td>
                <td>Щербаков</td>
                <td>[email protected]</td>
                <td>Европейские танцы, Стрип-денс, Ролики</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Юрий</td>
                <td>Голов</td>
                <td>[email protected]</td>
                <td>Горный велосипед, скейтборд, катание на квадрацикле</td>
            </tr>
        </tbody>
    </table>
    </div> 

 

 

ни фига не сохраняет ...

не дает редактировать код и все тут ... неужели баг на 2.3.0.2?

[OutofControl]

Не правильно сохранял ... перед сохранением, надо опять нажать на исходный код, а потом сохранить

Поставил <div> с классом, адаптировался под смарт, но таблица просто в диве двигается (право-лево) и не выдается полностью, поставил класс внутри table , ни чего не поменялось ...

А хотелось бы, что бы при просмотре со смарт-а, таблица выстраивалась в один столбик ... что бы не скролить, а на сайте в ряд

как то дивами можно сделать, без использования таблиц?

но два дива я размещу на одной строке, но как разместить много дивов на одной строке, что бы на ББ они смотрелись в строке, а на смарте или других небольших экранах, в столбик?

Змінено 4 лютого 2017 користувачем OutofControl

[thentru]

В таком случае, изучайте систему сеток бутстрап

https://itchief.ru/lessons/bootstrap-3/22-the-grid-system-twitter-bootstrap-3

[OutofControl]

6 минут назад, thentru сказал:

В таком случае, изучайте систему сеток бутстрап

https://itchief.ru/lessons/bootstrap-3/22-the-grid-system-twitter-bootstrap-3

Спасибо ... буду читать

[OutofControl]

24 минуты назад, thentru сказал:

В таком случае, изучайте систему сеток бутстрап

https://itchief.ru/lessons/bootstrap-3/22-the-grid-system-twitter-bootstrap-3

то есть для моей задачи подойдет "Контейнер с плавающей шириной"?

Это надо для каждого гаджета что ли? То есть для одного размера окна, одно, для другого другой?

А что, нельзя сделать, что бы сразу под все?

Или я что то неправильно понял

Змінено 4 лютого 2017 користувачем OutofControl

[OutofControl]

1 час назад, thentru сказал:

В таком случае, изучайте систему сеток бутстрап

https://itchief.ru/lessons/bootstrap-3/22-the-grid-system-twitter-bootstrap-3

Подскажите, написал код, как описано на сайте ИТ ШЕФ, но почему то не получилось ... 

http://joxi.ru/L219nR0H80bop2

<div class="container-fluid">
    
    <div class="row">
        <div class="col-*-3">
            <h3><b>Метрологические услуги</b></h3>
            <ul>
                <li>
                    <b><a href="http://xn--80aairftm.xn----9sb0ckhh.xn--p1ai/gaz_santehnika_electro/poverka_ipu" target="_blank">Поверка счетчиков воды</a></b>
                </li>
            </ul>
        
        </div>
        <div class="col-*-3">
            <h3><b>Сантехнические услуги</b></h3>
            <ul>
                <li>
                    <b><a href="http://xn--80aairftm.xn----9sb0ckhh.xn--p1ai/gaz_santehnika_electro/ustanovka_ipu" target="_blank">Устанока счетчиков воды</a></b>
                </li>
            </ul>
        </div>
        <div class="col-*-3">
            <h3><b>Газовые работы</b></h3>
            <ul>
                <li>
                    <a href="http://xn--80aairftm.xn----9sb0ckhh.xn--p1ai/gaz_santehnika_electro/gazovoe_oborudovanie" target="_blank"><b>Установка счетчиков газа</b></a>
                </li>
            </ul>
        </div>
        <div class="col-*-3">
            <h3><b>Продажа</b></h3>
            <ul>
                <li>
                    <a href="http://xn--80aairftm.xn----9sb0ckhh.xn--p1ai/santexnika"><b>Сантехника;</b></a>
                </li>
                 <li>
                    <b><a href="http://xn--80aairftm.xn----9sb0ckhh.xn--p1ai/elektrika">Электрики;</a></b>
                </li>
                 <li>
                    <b><a href="http://xn--80aairftm.xn----9sb0ckhh.xn--p1ai/search?search=%D0%BA%D0%BE%D1%82%D0%B5%D0%BB%20%D0%B3%D0%B0%D0%B7%D0%BE%D0%B2%D1%8B%D0%B9" target="_blank">Газового оборудования;</a></b>
                </li>
            </ul>
        </div>
    </div>
</div>

 

Змінено 4 лютого 2017 користувачем OutofControl

[efremovav]

Вместо звёздочек везде вставьте "sm", т.е. "col-sm-3"

[OutofControl]

36 минут назад, efremovav сказал:

Вместо звёздочек везде вставьте "sm", т.е. "col-sm-3"

Обалдеть ... спасибо

[OutofControl]

41 минуту назад, efremovav сказал:

Вместо звёздочек везде вставьте "sm", т.е. "col-sm-3"

Но все равно вылезает за пределы ... 

http://joxi.ru/4AkyBGpcykwx4m

http://joxi.ru/V2VDQYBfxk7Edr

http://joxi.ru/KAgZvW8f4KLRl2

[efremovav]

Попробуйте убрать внешний блок "container-fluid", оставьте только <div class="row">

[thentru]

это код для 4 блоков

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">Блок №1</div>
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">Блок №2</div>
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">Блок №3</div>
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">Блок №4</div>
  </div>
</div>

это код для 3 блоков
 

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">Блок №1</div>
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">Блок №2</div>
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">Блок №3</div>
  </div>
</div>

 

[OutofControl]

5 часов назад, thentru сказал:

это код для 4 блоков

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">Блок №1</div>
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">Блок №2</div>
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">Блок №3</div>
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">Блок №4</div>
  </div>
</div>

это код для 3 блоков
 

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">Блок №1</div>
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">Блок №2</div>
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">Блок №3</div>
  </div>
</div>

 

Спасибо, получилось. Скопировал и вставил ...  

Правда хотелось бы понять, потому как ни чего не понятно :)))) Даже после прочтения статьи

[efremovav]

Если простыми словами  - xs, sm, md, lg - размеры экрана, от мобильных до самых широких. 12 - блок на всю ширину, остальные блоки будут смещаться на ниже. 6 - на пол экрана. Т.е. этими классами задаём поведение блока при разных размерах экрана.

Сумма этих чисел в строке (row) должна быть равна 12, чтобы блоки располагались в одну строку. Если сумма превышает 12, то последующие блоки сместятся ниже.

[thentru]

5 минут назад, Pascha сказал:

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

интересное решение