@Timak003

Как правильно оформить CSS для таблицы в мобильной выдаче?

Есть CSS код отвечающий за оформление таблиц в мобильной выдаче сайта:

tbody tr:nth-of-type(2n) {
    background-color: #ffffff;
}
 
@media screen and (max-width: 680px) {
    table {
        width:100%;
    }
    thead {
        display: none;
    }
    tr:nth-of-type(2n) {
        background-color: inherit;
    }
    tbody td {
        display: block; text-align:center;
    }
    tbody td:before {
        content: attr(data-th);
        display: block;
        text-align:center;
    }
}


Вопрос: "Как правильно прописать (присвоить class) этому коду, чтобы он работал только для вывода определенной таблицы, а не всех на сайте?"
  • Вопрос задан
  • 49 просмотров
Решения вопроса 1
@alekseyHunter
Студент. Охотник за знаниями.
В CSS замени table одним из следующих селекторов:
.класс_родителя .your_class_for_table {
//code
}
//Если таких таблиц много, усложняем селектор
.класс_родителя table.your_class_for_table {
//code
}
//Не работает? Может у родителя есть id?
#id_родителя.класс_родителя table.your_class_for_table {
//code
}
//Все еще не работает? Добавляем дочерний класс для таблицы
#id_родителя.класс_родителя table.your_class_for_table.дополнительный_класс_только_для_этой_таблицы {
//code
}


Остальные по такому же принципу пиши, то есть так :
//рабочий вариант тэг
.класс_родителя .your_class_for_table thead
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
23 авг. 2019, в 17:54
70000 руб./за проект
05 сент. 2019, в 14:46
25000 руб./за проект
17 сент. 2019, в 12:51
400 руб./в час