Question

我正在尝试将媒体查询应用于表格以隐藏较小设备上的可选列。

我根据两个屏幕中断隐藏了两列：

@media screen and (max-width: 33em) {
  th.optional-1,
  td.optional-1 {
    display: none !important;
  }
}
@media screen and (max-width: 43em) {
  th.optional-2,
  td.optional-2 {
    display: none !important;
  }
}

然后我将class="optional-1"应用于th和td元素。我添加data-role="table"以使表格正确设置样式。

媒体查询工作正常，但是一旦表格达到默认的响应大小，表格就会变为平面视图。我首先考虑添加一个类来强制表没有响应（这是有效的），但它然后停止我的可选类，因为它们都与!important竞争，这是在JQM中克服默认响应样式所必需的。 / p>

.table-responsive-none td,
.table-responsive-none th,
.table-responsive-none tbody th,
.table-responsive-none tbody td,
.table-responsive-none thead td,
.table-responsive-none thead th {
  display: table-cell !important;
  margin: 0 !important;
}
.table-responsive-none td .ui-table-cell-label,
.table-responsive-none th .ui-table-cell-label {
  display: none !important;
}

或者我可以使用data-mode="columntoggle"但我不希望列切换工具的行为，我也想指定我自己的休息。

删除data-role="table"时问题已修复，但表格看起来不正确。

Answer 1

如果我早点想到这个，那就错了。

我解决了这个问题，方法是删除data-role="table"并将类ui-table添加到表中，该表现在会关闭响应行为并让我控制它。最后，我只需要媒体查询来隐藏给定休息时间的列。

@media screen and (max-width: 33em) {
  th.optional-1,
  td.optional-1 {
    display: none !important;
  }
}
@media screen and (max-width: 43em) {
  th.optional-2,
  td.optional-2 {
    display: none !important;
  }
}

如何阻止jQuery Mobile表的响应？

1 个答案: