CSS для таблиц. Игнорирование стиля

  • 10 Ответов
  • 366 Просмотров

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

*

vetali

  • ***
  • 55
  • 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, 15:36:42 от vetali »

*

SmokerMan

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

*

vetali

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

*

AlekVolsk

  • ********
  • 6301
  • 336
Re: CSS для таблиц. Игнорирование стиля
« Ответ #3 : 11.12.2016, 18: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

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

*

vetali

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

*

AlekVolsk

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

Re: CSS для таблиц. Игнорирование стиля
« Ответ #7 : 12.12.2016, 01:41:49 »
Не проще использовать бутстрап? ьабличная верстка - это прошлый век...

*

vetali

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

*

vetali

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

*

AlekVolsk

  • ********
  • 6301
  • 336
Re: CSS для таблиц. Игнорирование стиля
« Ответ #10 : 12.12.2016, 01:54:14 »
бутстрап не проще, особенно если он вообще не используется...

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