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

Question

我有一个响应式数据表，就像在这个例子中一样 https://editor.datatables.net/examples/extensions/responsive.html 但是我的一个列包含链接，这意味着当我的数据表折叠并且我单击展开按钮时，链接列扩展并破坏了我的网页的响应能力（表格应与顶部的绿色 jumbotron 对齐）

我尝试通过在 th 和目标 [4] 中添加类名来隐藏特定媒体查询上的链接列（4 是列链接的数量）然后添加一个 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;
    }

它仍然不起作用

您对如何隐藏特定媒体查询大小的列有任何想法。其他方法也受到欢迎，我唯一想要的就是让数据表始终响应。谢谢！

标签： datatable

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