How do I hide the header row in DataTables?

Question

I want to hide the header row from appearing, being visible on the table. (Both when viewed from desktop and mobile)

I tried:

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

While this code seems to render the table the way I want (header-less), it also effects the output of the buttons used here. The buttons are set to output whatever is visible (toggled by column visibility).

And unfortunately this code removes not just the theader in the export output, but also all the data that was in the tables.

The same thing happens when I try:

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

Is there anyway to keep the output as it was before and only hide the table headers from view, as in just the row with the column titles? I want to keep the buttons (copy, excel, pdf, colvis) working on the table data.

https://jsfiddle.net/287fum2q/

EDIT:

Using the following code in the CSS results in the problem I mentioned in the first part of my question:

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

As does this:

thead { display: none!important; }

If you could include a saved jsfiddle that shows the solution, that'd be all the more helpful.

Answer 1

thead css was conflict with semanticui.min.css so used !important to overwrite css

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

Answer 2

It appears the DataTables Jquery plugin may possibly have a bug. DataTables assumes the header display will not be set to none . When you set the header display:none it prevents the DataTables buttons from working as expected.

Here's your workaround :

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

This removes the header from sight, but the DataTables buttons still have what they need to work correctly. I just learned this can be good practice (surprisingly) because display:none makes content "inaccessible" to screen readers.