0 Пользователей и 1 Гость просматривают эту тему.
  • 10 Ответов
  • 1485 Просмотров
*

vetali

  • Захожу иногда
  • 58
  • 0 / 0
Всех приветствую!
Прошу помощи в составлении стиля для таблиц. На сайте имеются таблицы  к которыми применяется следующий стиль в custom.css:

Код
@media screen and (max-width: 600px) {
table {width:100%;}
thead {display: none;}
tr:nth-of-type(2n) {background-color: inherit;}
tr td:first-child {background:; font-weight:bold;}
tr th:first-child {font-weight:bold;}
tbody td, tbody th {display: block; text-align:center;}
tbody td, tbody th:before {
content: attr(data-th);
display: block;
text-align:center;
}
}

есть таблица к которой не должен применяться этот стиль. как это реализовать это?
Данный стиль переделывает для мобильных устройств таблицу например 2х2 в 1х4 (1 колонка и 4 ряда).
Как можно сделать чтоб на планшетах(max-width: 979px) таблицы переделывались например из 3х3 в 2х5(2 колонки и 5 рядов).
Большое спасибо за помощь!
« Последнее редактирование: 11.12.2016, 13:36:42 от vetali »
*

SmokerMan

  • Гуру
  • 5293
  • 720 / 26
Re: CSS для таблиц. Игнорирование стиля
« Ответ #1 : 11.12.2016, 13:33:47 »
есть таблица к которой не должен применяться этот стиль. как это реализовать это?
http://htmlbook.ru/css/not
*

vetali

  • Захожу иногда
  • 58
  • 0 / 0
Re: CSS для таблиц. Игнорирование стиля
« Ответ #2 : 11.12.2016, 14:05:14 »
Прошу прощения но для меня сложновато.. куда вставить ":not"?
*

AlekVolsk

  • Гуру
  • 6915
  • 415 / 4
Re: CSS для таблиц. Игнорирование стиля
« Ответ #3 : 11.12.2016, 16:35:54 »
для таблицы, для которой вам Не надо применять указанный стиль, припишите класс .nostyle, измените ваш CSS следующим образом:
Код: css
@media screen and (max-width: 600px) {
  table:not(.nostyle) {width:100%;}
  table:not(.nostyle) thead {display: none;}
  table:not(.nostyle) tr:nth-of-type(2n) {background-color: inherit;}
  table:not(.nostyle) tr td:first-child {background:none; font-weight:bold;}
  table:not(.nostyle) tr th:first-child {font-weight:bold;}
  table:not(.nostyle) tbody td, table:not(.nostyle) tbody th {display: block; text-align:center;}
  table:not(.nostyle) tbody td, table:not(.nostyle) tbody th:before {
    content: attr(data-th);
    display: block;
    text-align:center;
  }
}

таким образом стиль применится ко всем таблицам, кроме таблиц с классом .nostyle - они будут проигнорированы
*

vetali

  • Захожу иногда
  • 58
  • 0 / 0
Re: CSS для таблиц. Игнорирование стиля
« Ответ #4 : 11.12.2016, 17:12:13 »
Все получилось замечательно!
Спасибо большое! *DRINK*
« Последнее редактирование: 11.12.2016, 21:54:48 от vetali »
*

vetali

  • Захожу иногда
  • 58
  • 0 / 0
Re: CSS для таблиц. Игнорирование стиля
« Ответ #5 : 11.12.2016, 22:52:37 »
кто может помочь со вторым вопросом?
Как можно сделать чтоб на планшетах(max-width: 979px) таблицы переделывались например из 3х3 в 2х5(2 колонки и 5 рядов).
*

AlekVolsk

  • Гуру
  • 6915
  • 415 / 4
Re: CSS для таблиц. Игнорирование стиля
« Ответ #6 : 11.12.2016, 23:08:40 »
это не так просто. изучайте пример: http://codepen.io/geoffyuen/pen/FCBEg
*

ProtectYourSite

  • Живу я здесь
  • 2356
  • 135 / 4
  • Безопасность вебсайтов
Re: CSS для таблиц. Игнорирование стиля
« Ответ #7 : 11.12.2016, 23:41:49 »
Не проще использовать бутстрап? ьабличная верстка - это прошлый век...
*

vetali

  • Захожу иногда
  • 58
  • 0 / 0
Re: CSS для таблиц. Игнорирование стиля
« Ответ #8 : 11.12.2016, 23:48:39 »
и правда сложно..
не было бы этих проблем если нашел бы рабочий способ как сделать вступительное изображение к материалу ссылкой.
есть модуль выводящий материалы из категории и он оптимизирован под все устройства но изображения не кликабельны, а они и привлекают всё внимание. Кликабилен только текст под ними..
*

vetali

  • Захожу иногда
  • 58
  • 0 / 0
Re: CSS для таблиц. Игнорирование стиля
« Ответ #9 : 11.12.2016, 23:50:34 »
Не проще использовать бутстрап? ьабличная верстка - это прошлый век...
да я бы с радостью, и вроде почитал тут http://bootstrap-3.ru/css.php#overview но не хочет получаться у меня..
*

AlekVolsk

  • Гуру
  • 6915
  • 415 / 4
Re: CSS для таблиц. Игнорирование стиля
« Ответ #10 : 11.12.2016, 23:54:14 »
бутстрап не проще, особенно если он вообще не используется...

да и вообще бутстрап - зло, пидуманное для облегчения потоковой шаблонизации, неуместной в частной разработке/верстке
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Стиль Breadcrumbs отличный от стиля по умолчанию

Автор Plazmodina

Ответов: 12
Просмотров: 2242
Последний ответ 10.09.2014, 20:53:48
от Vovan-ru-ru
Почему FireBug не показывает файл стиля?

Автор qwe88

Ответов: 7
Просмотров: 1749
Последний ответ 11.08.2013, 23:30:59
от verstalshik
Изменение стиля кнопки Bootstrap

Автор leito

Ответов: 4
Просмотров: 3216
Последний ответ 26.07.2013, 23:37:44
от Valerko_O
Применение стиля к меню

Автор blind

Ответов: 1
Просмотров: 1427
Последний ответ 21.04.2013, 15:27:08
от Babyaka
Изменение стиля модуля поиск, умный поиск

Автор Mishanya_V

Ответов: 6
Просмотров: 4718
Последний ответ 15.02.2013, 01:10:36
от Ghost_FX