Задать вопрос
@Timak003
css

Как правильно оформить 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) этому коду, чтобы он работал только для вывода определенной таблицы, а не всех на сайте?"
  • Вопрос задан
  • 58 просмотров
1 комментарий
Подписаться 1 Средний 1 комментарий
Решения вопроса 1
alekseyHunter
@alekseyHunter
Android developer
В 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
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend-разработчик (React)
ДАЛЕЕ
от 130 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Дописать функцию на Flutter, работа с yandex map kit
20 апр. 2024, в 04:18
3000 руб./за проект
Английская версия для сайта на WordPress
20 апр. 2024, в 03:34
8000 руб./за проект
Доработать клиентское приложение для GTA 5 на C#
20 апр. 2024, в 00:51
1000 руб./за проект
Ещё заказы