javascript - 如何隐藏数据表中的标题行？

Question

我想隐藏标题行，使其在表格中不可见。 (从桌面和移动设备查看时)

我试过:

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

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

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

当我尝试时，同样的事情发生了:

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

有没有办法保持输出和以前一样，只隐藏表头不可见，就像只在带有列标题的行中一样？我想让按钮(copy、excel、pdf、colvis)继续处理表格数据。

https://jsfiddle.net/287fum2q/

编辑:

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

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

这样做:

thead { display: none!important; }

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

Answer 1

看来 DataTables Jquery 插件可能有一个错误。 DataTables 假定标题显示不会设置为 none。当您设置 header display:none 时，它会阻止 DataTables 按钮按预期工作。

Here's your workaround :

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

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