TablePress как задать стили таблицы для мобильной версии сайта

Автор Тема: TablePress как задать стили таблицы для мобильной версии сайта  (Прочитано 1398 раз)

Оффлайн sergei299Автор темы

  • Бизнес оценка: (0)
  • Постоялец
  • ***
  • СПАСИБО: 128
  • Сообщений: 196
  • Карма: 22
  • Пол: Мужской
    • Просмотр профиля

Оффлайн sergei299Автор темы

  • Постоялец
  • ***
Подскажите как правильно задать стили для мобильной версии таблицы сделанной через TablePress. Необходимо сделать фиксированную ширину первого столбца. Долго гуглил много всего уже перепробовал и вот к чему пришел, в стилях пописываю

@media screen and (max-width: 600px) {

   .tablepress .column-1 {
      display: block;
      width: 240px;
}
}

Это помогает задать необходимую ширину, но нет переноса строки которая больше этого размера, она вылезает за пределы ячейки и немного ломается первая строка она же служит заголовком. Скрин приложил.
Плагин FooTable не подходит.
Вы можете прочесть все пособия в мире и прослыть знатоком, но пока вы не начнете реально зарабатывать, все ваши знания равны нулю.


Оффлайн sergei299Автор темы

  • Бизнес оценка: (0)
  • Постоялец
  • ***
  • СПАСИБО: 128
  • Сообщений: 196
  • Карма: 22
  • Пол: Мужской
    • Просмотр профиля

Оффлайн sergei299Автор темы

  • Постоялец
  • ***
Проблема решена, вот код, может кому пригодится

@media screen and (max-width: 600px) {

.tablepress .column-1 {
display: block;
width: 240px!important;
white-space: normal;
}
}
Вы можете прочесть все пособия в мире и прослыть знатоком, но пока вы не начнете реально зарабатывать, все ваши знания равны нулю.

Оффлайн Надежда Хачатурова

  • Бизнес оценка: (11, 100%)
  • КМС
  • *****
  • СПАСИБО: 3510
  • Сообщений: 3885
  • Карма: 451
  • Пол: Женский
  • Аудит, seo-оптимизации
  • Награды Более трех тысяч спасибо Мастер поисковой оптимизации SEO-специалист
    • Просмотр профиля
    • Блог Надежды Хачатуровой
  • Доп. информация
    • Бизнес оценка: (11, 100%)
    • СПАСИБО: 3510
    • Сообщений: 3885
    • Карма: 451
    • Пол: Женский
    • Аудит, seo-оптимизации
    • Награды Более трех тысяч спасибо Мастер поисковой оптимизации SEO-специалист
      • Просмотр профиля
      • Блог Надежды Хачатуровой
sergei299, поскольку я совсем не программист, можно уточнить, это решение именно для мобильной версии или для мобильного устройства?
Аудит и оптимизация сайтов
Хостинг, который не подведет

Оффлайн Старый

  • Бизнес оценка: (9, 100%)
  • Мастер
  • *****
  • СПАСИБО: 1637
  • Сообщений: 5098
  • Карма: 154
  • Ищу работу постоянную, удалённую с окладом.
  • Награды Более одной тысячи спасибо КМС поисковой оптимизации
    • Просмотр профиля

Оффлайн Старый

  • Мастер
  • *****
  • Доп. информация
    • Бизнес оценка: (9, 100%)
    • СПАСИБО: 1637
    • Сообщений: 5098
    • Карма: 154
    • Ищу работу постоянную, удалённую с окладом.
    • Награды Более одной тысячи спасибо КМС поисковой оптимизации
      • Просмотр профиля
можно уточнить, это решение именно для мобильной версии или для мобильного устройства?

Это для любого устройства, которое имеет разрешение экрана до 600 px.

Реализация правильная.

Но лучше посмотреть наиболее востребованные устройства по разрешению и прописывать градацию, например:
Код:
Только зарегистрированные пользователи могут видеть код. Пожалуйста, войдите или зарегистрируйтесь.
И под каждое разрешение прописывать размеры и поведение элементов.



Оффлайн ProtectYourSite

  • Бизнес оценка: (3, 100%)
  • Ветеран
  • *****
  • СПАСИБО: 233
  • Сообщений: 544
  • Карма: 3
    • Просмотр профиля
    • Удаление вирусов на сайте с гарантией

Оффлайн ProtectYourSite

  • Ветеран
  • *****

Реализация правильная.

Поспорил бы.
Во-первых, использовать important считаю признаком дурного тона.
Во-вторых, адаптивность обычно подразумевает процентное задание ширины, а не жёсткое в пикселей, которое потом и надо под каждое разрешение фиксировать.


Оффлайн Старый

  • Бизнес оценка: (9, 100%)
  • Мастер
  • *****
  • СПАСИБО: 1637
  • Сообщений: 5098
  • Карма: 154
  • Ищу работу постоянную, удалённую с окладом.
  • Награды Более одной тысячи спасибо КМС поисковой оптимизации
    • Просмотр профиля

Оффлайн Старый

  • Мастер
  • *****
  • Доп. информация
    • Бизнес оценка: (9, 100%)
    • СПАСИБО: 1637
    • Сообщений: 5098
    • Карма: 154
    • Ищу работу постоянную, удалённую с окладом.
    • Награды Более одной тысячи спасибо КМС поисковой оптимизации
      • Просмотр профиля
адаптивность обычно подразумевает процентное задание ширины

Это резиновость.  :)
А адаптивность - это указание минимальной и максимальной ширины/высоты и размеры элементов. Поэтому и указываются стили для определённых разрешений.
Проценты тоже можно использовать в некоторых ситуациях, но не везде.


 

Похожие темы

  Тема / Автор Ответов Последний ответ
5 Ответов
6712 Просмотров
Последний ответ 10-05-2011, 14:17:39
от Владимир75
8 Ответов
3672 Просмотров
Последний ответ 05-01-2014, 16:21:54
от Clever
3 Ответов
4611 Просмотров
Последний ответ 31-03-2013, 21:10:49
от bibika
6 Ответов
2356 Просмотров
Последний ответ 08-04-2015, 09:23:47
от avk
0 Ответов
506 Просмотров
Последний ответ 22-08-2016, 12:35:40
от shoplte