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

Question

此 link 适用于桌面视图 Desktop View。这个 link 如果用于移动视图。 Mobile View.

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

这是我的 css 代码。顺便说一句，我使用 gridview 来显示 table.

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 class 添加到您想要在 i-pad (max-width 768px) 下方显示分辨率的列中，您可以在 CSS

和

将xl-deviceclass添加到您希望在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/

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

How to hide some of the columns in the table when in mobile view?

css

mobile

twitter-bootstrap

twitter-bootstrap-3