如何隐藏 DataTables 中的标题行？答案

【问题标题】：How do I hide the header row in DataTables?如何隐藏 DataTables 中的标题行？
【发布时间】：2018-01-27 19:09:38
【问题描述】：

我想隐藏标题行，使其在表格上可见。（从桌面和移动设备查看时）

我试过了：

"drawCallback":function(settings ){$("#mySelection thead").remove();} ,

虽然此代码似乎以我想要的方式呈现表格（无标题），但它也会影响此处使用的按钮的输出。按钮设置为输出可见的内容（由列可见性切换）。

不幸的是，这段代码不仅删除了导出输出中的标题，还删除了表中的所有数据。

当我尝试时会发生同样的事情：

$("#mySelection thead").hide()

有没有办法让输出保持原来的样子，只隐藏表格标题，就像在带有列标题的行中一样？我想让按钮（复制、excel、pdf、colvis）在表格数据上工作。

编辑：

在 CSS 中使用以下代码会导致我在问题的第一部分中提到的问题：

.ui.table thead { display: none !important; }

这样：

thead { display: none!important; }

如果您可以包含一个显示解决方案的已保存 jsfiddle，那就更有帮助了。

【问题讨论】：

【解决方案1】：

DataTables Jquery 插件似乎可能存在错误。 DataTables 假定标题显示不会设置为none。当您设置标题 display:none 时，它会阻止 DataTables 按钮按预期工作。

  .ui.table thead {
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
  }

这会从视线中移除标题，但 DataTables 按钮仍然具有正常工作所需的内容。我刚刚了解到这可能是一个很好的做法（令人惊讶）因为display:nonemakes content "inaccessible" to screen readers.

【讨论】：

我试过了，它看起来和以前一样，你能包括一个保存的 jsfiddle 吗？
我是forked your fiddle here. 如果你已经尝试过这个，我感觉我误会了什么。
我明白了。如果您在插入该代码之前和之后比较两者，您会发现没有任何变化。标题是“公司、索赔、总奖励”。我知道它看起来不像您的传统表格，语义 UI 使行堆叠在一起以适应移动视图。
啊我直到现在才在手机上看。它在我的电脑上工作。如果我找到解决方案，我会回来编辑我的答案。
@fly123 我已经编辑了我的答案。请看我的小提琴，我没有遇到从表中删除数据的任何问题。

【解决方案2】：

thead css 与 semanticui.min.css 冲突，所以使用 !important 覆盖 css

.ui.table thead {
    display: none !important;
}

【讨论】：