在移动视图中如何隐藏表格中的某些列？

Question

此链接适用于桌面视图Desktop View。 如果用于移动视图，则此链接。 Mobile 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

对于这种情况，您可以在构建的类中使用引导程序，例如

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

更多课程可以参考link。

Answer 2

您可以使用一些css 技巧来做到这一点：

只需在 i-pad (max-width 768px) 下方要显示分辨率的列中添加 sm-device 类，您可以在 CSS 中进行相应更改

和

将xl-device 类添加到您希望在max-width 768px 上方的大屏幕上显示的列中

@media screen and (max-width: 768px) {
    .sm-device {opacity:1 !important ; transition:opacity 0.5s ease-in-out 0s, padding 0.5s ease-in-out 0s;}

    .xl-device {opacity:0 !important; transition:opacity 0.5s ease-in-out 0s, padding 0.5s ease-in-out 0s;}

}

.xl-device {opacity:1; transition:opacity 0.5s ease-in-out 0s, padding 0.5s ease-in-out 0s; -moz-transition:opacity 0.5s ease-in-out 0s, padding 0.5s ease-in-out 0s; -webkit-transition:opacity 0.5s ease-in-out 0s, padding 0.5s ease-in-out 0s; }

.sm-device {opacity:0;  transition:opacity 0.5s ease-in-out 0s, padding 0.5s ease-in-out 0s;  -moz-transition:opacity 0.5s ease-in-out 0s, padding 0.5s ease-in-out 0s; -webkit-transition:opacity 0.5s ease-in-out 0s, padding 0.5s ease-in-out 0s;} 

演示：http://jsfiddle.net/f1076Lsk/