时间戳

首页 > 解决方案 > 根据宽度在两个表之间切换

css - 根据宽度在两个表之间切换

问题描述

我需要根据设备宽度在两个表之间切换（我的情况很不寻常，因为客户需要每个设备不同的表，所以我不能只制作一个响应表）。

我的问题很简单，我正在尝试使用@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}
}

但我只得到两个表（第一种情况）或没有（第二种情况）。

我必须如何使用选择器才能正确显示每个表格？

标签： css

解决方案

首先，我总是像这样使用@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}
    }

推荐阅读