Css 如何阻止jQuery移动表响应？

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

基于两个屏幕中断，我有两列要隐藏：

@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;
  }
}

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

，以使表格的样式正确

媒体查询可以正常工作，但是一旦表达到默认响应大小，表就会变成扁平视图。我首先考虑添加一个类来强制表无响应（这是可行的），但是它停止了我的可选类的工作，因为它们都与

竞争！重要信息

，这是克服JQM中默认响应风格所必需的

.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=“columnttoggle”

，但我不想要列切换功能的行为，我还想指定我自己的中断

---

删除

数据role=“table”

时，问题已得到修复，但是该表看起来不正确。

如果我早点想到这一点，那就糟了

我通过删除

data role=“table”

并将class

ui table

添加到表中解决了这个问题，该表现在可以关闭响应行为并让我控制它。最后，我只需要媒体查询就可以在给定的中断处隐藏列