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

您可以在构建的类中使用bootstrap来实现此方案，例如

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

对于更多课程，您可以参考此link。

Answer 2

您可以使用一些css技巧来完成此操作：

只需将sm-device类添加到要在i-pad（max-width 768px）下方显示分辨率的列，您就可以在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;}

DEMO：http://jsfiddle.net/f1076Lsk/

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

2 个答案: