根据媒体查询大小删除或隐藏特定（仅一个）数据表列

Question

我有一个响应数据table 就像这个例子 https://editor.datatables.net/examples/extensions/responsive.html 但是我的一个专栏包含 links，这意味着当我的数据table 崩溃并且我单击展开按钮时，link 列扩展并破坏了我的网页的响应能力（table 应该与顶部的绿色超大屏幕对齐）

我尝试通过隐藏特定媒体查询的 link 列在 th 和目标 [4] 中添加一个类名（4 是列数 link）然后添加一个 css 显示 none 但它只隐藏文本而不是整个列

@media (max-width: 700px) {
.hide {
display:none;
}
<th class="hide" width="30%">Link</th>

"targets": [4],
"className": "hide",
}

我也试过

@media (max-width: 700px) {
    table th, table td{
       display:none;
    }
table th:nth-child(1), table th:nth-child(2), table th:nth-child(3), table th:nth-child(5), table th:nth-child(6), 
    table td:nth-child(1), table td:nth-child(2),table td:nth-child(3),  table td:nth-child(5), table td:nth-child(6){
        display:table-cell;
    }

还是不行

您知道如何隐藏特定媒体查询大小的列吗？也欢迎使用其他方法，我唯一想要的是数据 table 始终响应。谢谢！

Answer 1

通过将类名和css添加到td

来解决

 "columnDefs": [{
"targets": [4],
'createdCell':  function (td) {
$(td).addClass('myclass');
}
}]

<th class="myclass" width="30%">Link</th>

@media (max-width: 700px) {
.myclass {
display:none!important;
}
}

根据媒体查询大小删除或隐藏特定（仅一个）数据表列

Removing or Hiding a specific(only one) datatable column depending on media query size

datatable