How to suppress table headers completely in jQuery

Question

I am using the DataTables plugin (www.datatables.net) for jQuery to display tables on a web page.

After reading through the documentation and doing some searches, I am unable to find out how to completely suppress or hide table headers, using the DataTables options or API.

Answer 1

Simple add the style display:none inline style to your thead tag.

    <thead style="display:none;">
    </thead>

Answer 2

Just add this to your css:

thead {
  display:none;
}

Answer 3

I know the question is pretty old, but I searched for it today and found another solution ...

In your js / coffee file:

$("#selector").dataTable({
  ... your other options ...

  fnDrawCallback: -> $("#selector thead").remove()
})

Pure JS variant:

$("#selector").dataTable({
  ... your other options ...

  fnDrawCallback: function() {
    $("#selector thead").remove();
  }
});

Answer 4

Why don't you simply hide them through css (i think datatables requires a thead section to work)?

.dataTables_wrapper table thead{
    display:none;
}

fiddle here: http://jsfiddle.net/LhZF3/