Question

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

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

thanx in adavance

Answer 1

由于没有人回答这个问题，我会继续为你做好准备。

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

OR

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

.row

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

<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>

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

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

1 个答案: