DataTable : How to hide table header?

问题

I have 2 tables using DataTable :

top: exact match
bottom : related

Here is what they look like right now.

As you can see that, there is no need to show the table header on the second table. I want to hide it.

I have tried using this on my CSS :

Since the class = inventory_related

.inventory_related table thead {

        display:none;

    }

I also tried to take off the whole :

       <thead class="thin-border-bottom ">

            <th>Catalog # </th>
            <th>Description</th>
            <th>Available Vials</th>

        </thead>

This doesn't work either.

Anyone have any suggestion on how do I hide my 2nd table header ?

Thanks.

回答1:

<table>
  <thead style='display:none;'>
    <th>header 1</th>
    <th>header 2</th>
  </thead>
  <tbody>
    <td>row value 1</td>
    <td>row value 2</td>
  </tbody>
</table>

回答2:

Please see the following code as an example:

.inventory_related thead {
  display: none;
}

<table>
  <thead>
    <th>header 1</th>
    <th>header 2</th>
  </thead>
  <tbody>
    <td>row value 1</td>
    <td>row value 2</td>
  </tbody>
</table>
<table class='inventory_related'>
  <thead>
    <th>header</th>
    <th>header 2</th>
  </thead>
  <tbody>
    <td>row value 3</td>
    <td>row value 4</td>
  </tbody>
</table>

回答3:

In my case, setting

.inventory_related thead {    
    display:none;   
}

messed with column widths, while

.inventory_related thead {    
    visibility: collapse;   
}

seems to be working.

回答4:

if the class of <table> is inventory_related then write the following css

.inventory_related thead {    
    display:none;   
}

回答5:

If you want to do it in jQuery(js) then you can simply do:

$("#datatableId").css("display", "none");

where 'datatableId' is the ID of your table or some div tag which contains the table.

来源：https://stackoverflow.com/questions/28593598/datatable-how-to-hide-table-header

标签

html

css

datatables

jquery-datatables