Переключение между двумя столами в зависимости от ширины

Question

Мне нужно переключаться между двумя таблицами в зависимости от ширины устройства (мой случай необычен, потому что клиенту нужны разные таблицы для каждого устройства, поэтому я не могу создать только одну отзывчивую таблицу).

Моя проблемаочень просто, я пытаюсь с @media и отображать свойства:

@media all and (min-width: 769px){
    table :nth-of-type(1){display:block}
    table :nth-of-type(2){display:none}
}
@media all and (max-width: 768px){
    table :nth-of-type(1){display:none}
    table :nth-of-type(2){display:block}
}

, но я получаю только две таблицы (первый случай) или нет (второй случай).

Как я должен использоватьселекторы для того, чтобы установить право показывать каждую таблицу?

Answer 1

Прежде всего, я всегда использую @media так: «@media only screen and ...».«@Media all and» отличается от того, что экран не будет взаимодействовать с типами принтера или программы чтения речи.

Я не уверен, почему вы хотите использовать селектор: nth-of-type () длятвой стол.В качестве обходного пути вы можете определить свою таблицу в div и скрыть весь div.

Поэтому, если вы хотите скрыть div, код должен выглядеть следующим образом:

    @media all and (min-width: 769px){
     #table_1 {display:block}
     #table_2 {display:none}
    }
    @media all and (max-width: 768px){
    #table_1 {display:none}
    #table_2 {display:block}
    }