使用媒体查询隐藏响应表中的列答案

【问题标题】：Hide Columns in responsive table using media queries使用媒体查询隐藏响应表中的列
【发布时间】：2014-07-26 13:40:31
【问题描述】：

嘿，我被困在移动设备上显示我的 django 应用程序。在模板中，表格有 4-5 列（在桌面上显示良好）

在移动设备上，我只想显示一列，当单击该列时应显示其余列数据（以折叠的形式）

所以为了隐藏所有列，我在我的 css 中尝试了这个

@media only screen and (max-device-width: 700px){
    //for header     and    for td to hide 
    tr th:nth-child(2), tr td:nth-child(2),
    tr th:nth-child(3), tr td:nth-child(3),
    tr th:nth-child(4), tr td:nth-child(4),
    {
        display: none;
    }

它只显示一列，但是如何在单击行时获取其相关数据（以折叠的形式）？

提前感谢

【问题讨论】：

请告诉我如何做到这一点...？
您是否尝试过在您想要消失的 th/td 标签中添加“hidden-sm”或“hidden-xs”？
哦，抱歉……我明白你现在在说什么……你需要编写一些 JavaScript，以便在点击手机时在某种弹出窗口中显示该数据……或者其他一些类似的方法。
尝试footables：fooplugins.com/footable-demos - js 插件，可根据需要折叠表格单元格。
@KevinNelson Right .... 对于移动设备来说，折叠比弹出窗口的外观和感觉最好 ..

标签： css django-templates twitter-bootstrap-3 media-queries

【解决方案1】：

由于没有人回答这个问题，我会继续告诉你我的看法。

无论如何，要将其转换为折叠/手风琴风格而不是弹出框或类似的东西，您可能需要使用 DIV 而不是 TABLE。然后，您必须做冗余数据，以便您要隐藏的数据也在折叠部分内。然后，您需要编写一些脚本，仅在显示较小的屏幕尺寸时捕获手风琴点击，以便在所有数据可见时没有手风琴。您还需要一个仅对小屏幕可见的列，以表明它是用户的手风琴，以便他们知道他们可以单击它......无论如何，我想，还有很多工作摆在您面前，并且我无法回答，因为这种工作完全取决于我没有的偏好和要求。

或

就个人而言，我对类似问题采取的方法是为 .responsive-table 创建一些 CSS，强制 .col-* 内部具有 nowrap 特定高度和隐藏溢出（如果你喜欢 text-overflow:ellipsis ）。这允许我根据屏幕尺寸强制我的列占用我想要的 col-*-x 宽度，并且不会在屏幕缩小太多时引入奇怪的包装。除此之外，然后我只需使用老式的 Bootstrap 方式编写响应式代码并使其成为我的单个 .row 在较小的屏幕上将是两行，例如

<div class='row'>
    <div class='col-sm-3 col-xs-6'></div>
    <div class='col-sm-3 col-xs-6'></div>
    <div class='col-sm-3 col-xs-6'></div>
    <div class='col-sm-3 col-xs-6'></div>
</div>

这将使这一行在较小的屏幕上占用两行空间。我对“表头”执行完全相同的 HTML，以便表头与包装方案匹配……这也是为什么需要 nowrap 的原因，因为没有 nowrap，各个行可能会停止匹配表头。但是，您仍然会遇到所有行一起运行的可读性问题。所以，为了解决这个问题，我做了一个媒体查询，它将在较小的屏幕上用一些视觉空间分隔行：例如

@media(max-width 768px) {
    .responsive-table .row { margin-bottom:3px }
}

如果行或边框上有轻微的背景色，或者用于视觉分离的其他形式的视觉指示符，则此视觉间距会更清晰。

【讨论】：