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

嘿，我一直想在手机上显示我的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;
    }

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

---

由于没有人回答这个问题，我将继续向你阐述我的看法

无论如何，要将其转换为折叠/手风琴样式，而不是popover或类似的样式，您可能需要使用div而不是TABLEs。然后，您将必须执行冗余数据，以便将要使其不可见的数据也位于折叠部分内。然后，您需要编写一些脚本，仅在屏幕尺寸较小时捕捉手风琴单击，以便在所有数据都可见时没有手风琴。你还需要一个只有小屏幕才能看到的专栏，表明这是用户的手风琴，这样他们就知道他们可以点击它……在任何情况下，我可以想象，你前面有很多工作，而且比我能回答的更多，因为这类工作都取决于我没有的偏好和要求

或

就我个人而言，我处理类似问题的方法是为

.responsive table

创建一些CSS，强制.col-*inside具有

nowrap

特定高度和隐藏溢出（以及

文本溢出：省略号，如果您愿意）。这允许我根据屏幕大小强制我的列占用col-*-x宽度，并且在屏幕收缩过大时不会引入奇怪的包装。除此之外，我只需以传统的引导方式编写响应代码，这样我的单个
.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>

如果行或边框上有轻微的背景色，或其他形式的视觉分隔视觉指示器，则此视觉间距更清晰。
请告诉我执行此操作的方法？你有没有试过在你想要消失的th/td标签上添加“隐藏的sm”或“隐藏的xs”？哦，抱歉…我理解你现在说的话…你需要制作一些JavaScript，在点击手机时以某种弹出窗口的形式显示数据…或者其他类似的方法。试试footables:-js插件，根据需要折叠表格单元格。@KevinNelson Right。。。。与弹出窗口相比，折叠是移动设备的最佳外观。。
@media(max-width 768px) {
    .responsive-table .row { margin-bottom:3px }
}