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

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

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

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

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

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

http://joxi.ru/4AkyBGpcykqZLm

 

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

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

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

 

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

 

 

 

 

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


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

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

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


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

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

Изменено пользователем thentru

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


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

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

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


Ссылка на сообщение
Поделиться на другие сайты
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    23

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

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


Ссылка на сообщение
Поделиться на другие сайты
15 минут назад, efremovav сказал:

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

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

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

Изменено пользователем OutofControl

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


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

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

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


Ссылка на сообщение
Поделиться на другие сайты
8 минут назад, efremovav сказал:

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

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

 

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

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


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

проверено на версии 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>ivan@mail.ru</td>
                <td>Плавание, бодибилдинг, боевые искусства</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Петр</td>
                <td>Щербаков</td>
                <td>petr@mail.ru</td>
                <td>Европейские танцы, Стрип-денс, Ролики</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Юрий</td>
                <td>Голов</td>
                <td>yuri@mail.ru</td>
                <td>Горный велосипед, скейтборд, катание на квадрацикле</td>
            </tr>
        </tbody>
    </table>
    </div> 

 

 

Изменено пользователем thentru

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


Ссылка на сообщение
Поделиться на другие сайты
3 минуты назад, thentru сказал:

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

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

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


Ссылка на сообщение
Поделиться на другие сайты
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>ivan@mail.ru</td>
                <td>Плавание, бодибилдинг, боевые искусства</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Петр</td>
                <td>Щербаков</td>
                <td>petr@mail.ru</td>
                <td>Европейские танцы, Стрип-денс, Ролики</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Юрий</td>
                <td>Голов</td>
                <td>yuri@mail.ru</td>
                <td>Горный велосипед, скейтборд, катание на квадрацикле</td>
            </tr>
        </tbody>
    </table>
    </div> 

 

 

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

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

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


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

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

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

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

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

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

Изменено пользователем OutofControl

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


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

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

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

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


Ссылка на сообщение
Поделиться на другие сайты
6 минут назад, thentru сказал:

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

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

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

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


Ссылка на сообщение
Поделиться на другие сайты
24 минуты назад, thentru сказал:

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

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

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

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

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

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

Изменено пользователем 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>

 

Изменено пользователем OutofControl

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


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

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

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


Ссылка на сообщение
Поделиться на другие сайты
36 минут назад, efremovav сказал:

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

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

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


Ссылка на сообщение
Поделиться на другие сайты
41 минуту назад, efremovav сказал:

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

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

http://joxi.ru/4AkyBGpcykwx4m

http://joxi.ru/V2VDQYBfxk7Edr

http://joxi.ru/KAgZvW8f4KLRl2

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


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

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

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


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

это код для 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>

 

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


Ссылка на сообщение
Поделиться на другие сайты
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    23

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

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

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


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

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

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


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

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

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

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

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

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

Войти

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

Войти


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

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