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

Question

[Timak003]

Есть 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) этому коду, чтобы он работал только для вывода определенной таблицы, а не всех на сайте?"

Comments

[alekseyHunter]

Timak003, если ответ решил вопрос, отметьте его как решение.

Answer 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