Сделать таблицу адаптивной

@angiks · Регистрация: 07.05.2013

Студворк — интернет-сервис помощи студентам

Что-то ни как не получается у меня в мобильной версии сделать таблицу адаптивной. Не подскажете решение?
Корзина выходит за пределы рамки и все тут.
http://demo.site.xsph.ru/porto/checkout/

@mrtoxas · 26.04.2019, 12:44

Или добавляйте горизонтальный скролл таблицы, или перестраивайте ее в блочный вид

@angiks · 26.04.2019, 13:12 **[ТС]**

Не особенно сюда эти варианты подходят. Мне нужно чтобы она просто "сжималась". table-responsive но почему-то не срабатывает. Если удалить class="table" то все сжимается, а где стиль этого класса прописан не могу найти. Все , что видно в просмотрщике ни как не влияет

@mrtoxas · 26.04.2019, 13:56

Сообщение от angiks

Не особенно сюда эти варианты подходят

.table-responsive как раз и добавляет горизонтальную прокрутку таблице
Как таблица будет просто сжиматься, если уже дальше некуда?

@angiks · 26.04.2019, 14:02 **[ТС]**

В данном случае она не большая и вполне может. Если в просмотрщике уберете class="table" это будет видно

@mrtoxas · 26.04.2019, 14:09

Убрал

@angiks · 26.04.2019, 14:12 **[ТС]**

странно, а у меня получается

@mrtoxas · 26.04.2019, 14:32

Я не на той странице в корзину смотрел. Убирайте отступы внутри ячеек.

У вас есть такой стиль, который добавляет внутренний отступ для всех ячеек таблицы:

CSS
1
2
3
#d_quickcheckout .table > thead > tr > td{
   padding: 8px;
}

Соответственно, если вы убираете класс .table, этот селектор уже не находит ваши ячейки, отступы не задаются и таблица сжимается.

Добавлено через 12 минут
После всех стилей добавьте:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
@media(min-width:992px){
  #d_quickcheckout .table > tbody > tr > td, 
  #d_quickcheckout .table > tbody > tr > th, 
  #d_quickcheckout .table > tfoot > tr > td, 
  #d_quickcheckout .table > tfoot > tr > th, 
  #d_quickcheckout .table > thead > tr > td, 
  #d_quickcheckout .table > thead > tr > th{
    padding:0;
  }
  #d_quickcheckout .table thead td{
    font-weight:400;
  }
}

@angiks · 26.04.2019, 17:42 **[ТС]**

странно, но почему-то ни чего не происходит. я и в модуль прописывала, и в стили.. все так же
кэш чистила и !important прописывала.. не але

@mrtoxas · 26.04.2019, 19:56

Файл со стилями таблицы у вас подключен после ваших стилей. Поэтому, увеличиваем "вес" селектора:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
@media(min-width:992px){
  #d_quickcheckout table.table > tbody > tr > td, 
  #d_quickcheckout table.table > tbody > tr > th, 
  #d_quickcheckout table.table > tfoot > tr > td, 
  #d_quickcheckout table.table > tfoot > tr > th, 
  #d_quickcheckout table.table > thead > tr > td, 
  #d_quickcheckout table.table > thead > tr > th{
    padding:0;
  }
  #d_quickcheckout table.table thead td{
    font-weight:400;
  }
}

Возможно, где-то в админке есть куда забить пользовательские стили, в настройках плагина, например. Потому что, присутствует default.css и файл пустой. Скорее всего, он и предназначен для изменения стандартных стилей.

Code
1
catalog/view/theme/default/stylesheet/d_quickcheckout/theme/default.css

@angiks · 26.04.2019, 20:13 **[ТС]**

я уже и в пользовательский файл модуля вставляла и в темы, результата нет, даже с !important. прописала напрямую в фал и в браузер вставляла, тоже результата нет

@mrtoxas · 26.04.2019, 20:16

angiks, разбирайтесь с кешем, можете пропробовать открыть в другом браузере.
Последний код рабочий, даже, если написать его в stylesheet.css. Если что, то он отличается от кода, который я в 8м сообщении привел.

@angiks · 26.04.2019, 22:09 **[ТС]**

весь кэш вычистила и системный, обновила модификаторы, прописала код по очереди в модуль, в стили , в catalog/view/theme/default/stylesheet/d_quickcheckout/theme/default.css открыла в другом браузере.. это мистика какая-то

@mrtoxas · 26.04.2019, 22:20

Все верно, теперь подстраивайте медиазапрос (1я строка кода) под свои нужды, или вообще его уберите. Я привел код, который сработает если ширина экрана будет больше, чем 992px.

CSS
1
2
3
4
5
6
7
8
9
10
11
  #d_quickcheckout table.table > tbody > tr > td, 
  #d_quickcheckout table.table > tbody > tr > th, 
  #d_quickcheckout table.table > tfoot > tr > td, 
  #d_quickcheckout table.table > tfoot > tr > th, 
  #d_quickcheckout table.table > thead > tr > td, 
  #d_quickcheckout table.table > thead > tr > th{
    padding:0;
  }
  #d_quickcheckout table.table thead td{
    font-weight:400;
  }

@angiks · 26.04.2019, 22:50 **[ТС]**

Спасибо. методом тыка во все файлы что-то получилось

Новые блоги и статьи Все статьи Все блоги /
Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. fontSize": 18, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations":. . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .	Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .
Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .

@angiks 0 / 0 / 1 Регистрация: 07.05.2013 Сообщений: 195

	Сделать таблицу адаптивной 26.04.2019, 11:54. Показов 916. Ответов 14 Метки нет (Все метки) Что-то ни как не получается у меня в мобильной версии сделать таблицу адаптивной. Не подскажете решение? Корзина выходит за пределы рамки и все тут. http://demo.site.xsph.ru/porto/checkout/ Миниатюры 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	26.04.2019, 12:44
	Или добавляйте горизонтальный скролл таблицы, или перестраивайте ее в блочный вид 0

@angiks 0 / 0 / 1 Регистрация: 07.05.2013 Сообщений: 195
	26.04.2019, 13:12 [ТС]
	Не особенно сюда эти варианты подходят. Мне нужно чтобы она просто "сжималась". table-responsive но почему-то не срабатывает. Если удалить class="table" то все сжимается, а где стиль этого класса прописан не могу найти. Все , что видно в просмотрщике ни как не влияет 0

@angiks 0 / 0 / 1 Регистрация: 07.05.2013 Сообщений: 195
	26.04.2019, 14:02 [ТС]
	В данном случае она не большая и вполне может. Если в просмотрщике уберете class="table" это будет видно 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	26.04.2019, 14:09
	Убрал 0

@angiks 0 / 0 / 1 Регистрация: 07.05.2013 Сообщений: 195
	26.04.2019, 14:12 [ТС]
	странно, а у меня получается Миниатюры 0

@angiks 0 / 0 / 1 Регистрация: 07.05.2013 Сообщений: 195
	26.04.2019, 17:42 [ТС]
	странно, но почему-то ни чего не происходит. я и в модуль прописывала, и в стили.. все так же кэш чистила и !important прописывала.. не але Миниатюры 0

@angiks 0 / 0 / 1 Регистрация: 07.05.2013 Сообщений: 195
	26.04.2019, 20:13 [ТС]
	я уже и в пользовательский файл модуля вставляла и в темы, результата нет, даже с !important. прописала напрямую в фал и в браузер вставляла, тоже результата нет 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	26.04.2019, 20:16
	angiks, разбирайтесь с кешем, можете пропробовать открыть в другом браузере. Последний код рабочий, даже, если написать его в stylesheet.css. Если что, то он отличается от кода, который я в 8м сообщении привел. Миниатюры 0

@angiks 0 / 0 / 1 Регистрация: 07.05.2013 Сообщений: 195
	26.04.2019, 22:09 [ТС]
	весь кэш вычистила и системный, обновила модификаторы, прописала код по очереди в модуль, в стили , в catalog/view/theme/default/stylesheet/d_quickcheckout/theme/default.css открыла в другом браузере.. это мистика какая-то Миниатюры 0

@angiks 0 / 0 / 1 Регистрация: 07.05.2013 Сообщений: 195
	26.04.2019, 22:50 [ТС]
	Спасибо. методом тыка во все файлы что-то получилось 0