css - 在移动 View 中如何隐藏表格中的某些列？

Question

此链接适用于桌面 View Desktop View . 如果用于移动 View ，则此链接。 Mobile View .

如何使移动 View 中的这些列看起来像桌面 View 中的列。

这是我的 CSS 代码。顺便说一下，我使用 gridview 来显示表格。

CSS:

    #data {
     display: block;
     margin:20px;
     width:95%;
     height: 400px;
     overflow-y: scroll;
   }
  @media only screen and (max-width: 800px) {
    #data td, th {
        display:none;
    }
        #data th:nth-child(1),
        #data td:nth-child(1),
        #data th:nth-child(4),
        #data td:nth-child(4),
        #data th:nth-child(14),
        #data td:nth-child(14),
        #data th:nth-child(56),
        #data td:nth-child(56),
        #data th:nth-child(57),
        #data td:nth-child(57),
        #data th:nth-child(66),
        #data td:nth-child(66) {display:block;}

}

@media only screen and (max-width: 640px) {
    #data th:nth-child(1),
        #data td:nth-child(1),
        #data th:nth-child(4),
        #data td:nth-child(4),
        #data th:nth-child(14),
        #data td:nth-child(14),
        #data th:nth-child(56),
        #data td:nth-child(56),
        #data th:nth-child(57),
        #data td:nth-child(57),
        #data th:nth-child(66),
        #data td:nth-child(66) {display:block;}
}

Answer 1

对于这种情况，您可以在内置类中使用 Bootstrap ，例如

.hidden-xs{
    /*By adding class to the div will be hidden in phones and will be visible in desktop*/
}

更多类(class)可以引用link .